How to do Ajax requests? - javascript

Am trying to make wikipedia viewer for my freecodecamp project. But the ajax request fails every time. It does not return anything.
var url, value;
$(document).ready(function() {
$("button").on("click", function() {
value = $("input").val();
var url = "https://en.wikipedia.org/w/api.php?action=opensearch&search=" +
value + "&format=json&callback=?";
$.ajax({
type: "GET",
url: url,
async: false,
dataType: "json",
//jsonp: "callback",
success: function(data) {
console.log(data);
}
});
});
});


set dataType: 'jsonp'
remove &callback=? from the url (that's the default that jQuery will use anyway
example
var value = "google";
var url = 'https://en.wikipedia.org/w/api.php?action=opensearch&search='+ value + '&format=json';
$.ajax({
type: 'GET',
url: url,
dataType: 'jsonp',
success: function (data)
{
console.log(data);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


Use this code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="search" /><br /><br />
<button>Click here</button>
<script>
var url, value;
$(document).ready(function() {
$("button").on("click", function() {
value = $("input").val();
var url = "https://en.wikipedia.org/w/api.php?action=opensearch&search=" +
value + "&format=json";
$.ajax({
type: "GET",
url: url,
async: false,
dataType: "jsonp",
success: function(data) {
console.log(data);
}
});
});
});
</script>

Related

Charts in Dashboard should update after form submission

I am showing default charts on my dashboard and there is a form also and I want to update/filter the charts after the form submission.
Js code:
$(document).ready(function() {
$.ajax({
url: (contextPath + "/setting/dashboard"),
success: function(result){
drawLineChart()
}
}
});
$("#chartupdate").submit(function(e){
e.preventDefault();
var form = $(this);
var url = form.attr('action') ;
$.ajax({
url: url,
type: "POST",
data: form.serialize(),
success: function(data){
console.log("form" + data);
}
}) ;
}); });

A bracket inline 9 was preventing the execution of .submit function. Remove the bracket
$(document).ready(function() {
$.ajax({
url: (contextPath + "/setting/dashboard"),
success: function(result){
drawLineChart()
}
});
$("#chartupdate").submit(function(e){
e.preventDefault();
var form = $(this);
var url = form.attr('action') ;
$.ajax({
url: url,
type: "POST",
data: form.serialize(),
success: function(data){
console.log("form" + data);
}
}) ;
});
});

How to assign AJAX response to a global variable?

I want to save/assign an AJAX success response to a global variable. The response is fetched into a <p> tag, but how can I assign this response into a global variable for further use?
var x;
$.ajax({
url: url,
data: {
sending data
},
dataType: 'json',
success: function(data) {
alert(data.d)
}
});

You can just assign the data.d to x in the success block. The final solution would be
var x;
$.ajax({
url: url,
data: {
sending data
},
dataType: 'json',
success: function(data) {
x = data.d;
}
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
const ajaxData = $.ajax({
url: "data.json",
global: false,
type: "POST",
dataType: "jsonData",
async:false,
success: function(msg){
return msg;
}
}).responseText;
console.log(JSON.parse(ajaxData));
</script>

Ajax post does not work after document ready

I want to make an Ajax call after my document is ready. Here is my code :
<script>
$(window).bind("load", function () {
getCategories();
});
</script>
<script>
function getCategories() {
$.ajax({
type: "POST",
url: '#Url.Action("GetAllCategoryTest", "Category")',
dataType: "html",
contentType: "application/json",
async: false,
success: function (result) {
var categoryList = JSON.parse(result);
$.each(categoryList.result, function (i) {
$("#menuCategory").append('<li>' + categoryList.result[i].CategoryName + '</li>');
});
}
});
}
</script>
My ajax post works without using window.bind but I have to run my ajax post after my document is loaded.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
getCategories();
});
function getCategories() {
$.ajax({
type: "POST",
url: '#Url.Action("GetAllCategoryTest", "Category")',
dataType: "html",
contentType: "application/json",
async: false,
success: function(result) {
var categoryList = JSON.parse(result);
$.each(categoryList.result, function(i) {
$("#menuCategory").append('<li>' + categoryList.result[i].CategoryName + '</li>');
});
}
});
}
</script>

JSP AJAX return NULL

i using JQuery Ajax to call REST api in jsp but it return null no matter how i call but it can work in html. is there any way to solve this problem. Cant seem to find a solution in the net.
$(document).ready(function () {
alert('ready');
var accessKey = 'xkg8VRu6Ol+gMH+SUamkRIEB7fKzhwMvfMo/2U8UJcFhdvR4yN1GutmUIA3A6r3LDhot215OVVkZvNRzjl28TNUZgYFSswOi';
var thisUrl = 'http://www.onemap.sg/API/services.svc/getToken?accessKEY=' + accessKey;
$.ajax({
type: "GET",
url: thisUrl,
dataType: 'application/json',
success: function (data) {
alert('data is:' + data.GetToken[0].NewToken);
}
});
alert(thisUrl);
});

dataType should be jsonp
$(document).ready(function () {
var thisUrl = 'http://www.onemap.sg/API/services.svc/getToken?accessKEY=' + accessKey;
$.ajax({
type: "GET",
url: thisUrl,
dataType: 'jsonp',
success: function (data) {
console.log(data)
alert('data is:' + data.GetToken[0].NewToken);
}
});
});

Refer to this article:
http://www.isgoodstuff.com/2012/07/22/cross-domain-xml-using-jquery/
You only need "jquery.xdomainajax.js" that is there in the sample source-code to make it work.
$.ajax({
url: 'https://asdf/asdf',
dataType: "xml",
type: 'GET',
success: function(res) {
var myXML = res.responseText;
alert(myXML);
}
});

jQuery var doesn't change

I have an AJAX registration form:
var id = null;
$.ajax({
type: 'POST',
url: requestUrl,
data: $(".defaultRequest").serialize(),
dataType: 'json',
success: function(data) {
if(data.response){
$('div.errormsg').remove();
if(data.step){
openStep(data.step);
}else{
openStep('next');
}
}else{
$('div.errormsg').remove();
$('<div class="errormsg">'+data.message+"</div>").insertBefore(form);
}
}
});
When a user is successful registered, I want to show him his unique ID, but it stays NULL. How can I solve it?
<script type="text/javascript">
$('#linkkk').text('Your id is: '+id+'');
</script>

you need to set id first in success callback.
$.ajax({
type: 'POST',
url: requestUrl,
data: $(".defaultRequest").serialize(),
dataType: 'json',
success: function(data) {
if(data.response){
$('div.errormsg').remove();
if (data.step) {
openStep(data.step);
} else {
openStep('next');
}
$('#linkkk').text('Your id is: ' + data.id);
} else {
$('div.errormsg').remove();
$('<div class="errormsg">'+data.message+"</div>").insertBefore(form);
}
}
});

Categories

Resources