We Keep Coding

Add JSON object to DIV

I have a JSON object that I'm getting as a response to an AJAX call:
{ "Score": 5, "OS": "Windows 7" }
I want to add it to a div but the following does not work, data.OS or data.Score just return as undefined
$.ajax({
type: "POST",
url: '/details',
data: JSON.stringify(IP),
contentType: 'application/json;charset=UTF-8',
success: function(data) {
$('#OSdetails').append('<div id="details">Operating System: ' + data.OS + '</div>');
}
});
What am I doing wrong?

$.ajax({
dataType: 'JSON', <==== THIS IS MISSING
type: "POST",
url: '/details',
data: JSON.stringify(IP),
contentType: 'application/json;charset=UTF-8',
success: function(data) {
dataType specifies the expected data type and allows for automated conversion

Error getting json data, ajax

I'm trying to get a data from server without refreshing the page using ajax, So the problem the data come like a text not like json data
my code:
$.ajax({
type: "GET",
url: "http://localhost:8080/search?key=" + QUERY + "",
success: function (reslt) {
console.log(reslt);
console.log(reslt.length);
}
});
and the data on the server:
im using nodejs and express framework the code:
router.get('/search', function (req, res) {
tab = ['08:00', '09:00', '10:00', '11:00'];
res.end(JSON.stringify(tab));
});
why when i do console.log(reslt[3]); it's give me 8 , should give me 10:00

Use
dataType: 'json'
If your response is JSON, always set the datatype to json. Do it like this
$.ajax({
type: "GET",
dataType: 'json',
url: "http://localhost:8080/search?key=" + QUERY + "",
success: function (reslt) {
console.log(reslt);
console.log(reslt.length);
}
});

You have to use dataType and contentType attribute in your ajax request
$.ajax({
type: "GET",
dataType: 'json',
contentType: "application/json",
url: "http://localhost:8080/search?key=" + QUERY + "",
success: function (reslt) {
console.log(reslt);
console.log(reslt.length);
}
});

AJAX post is empty on the server side (PHP)

I am making an AJAX request to a PHP controller, by using jQuery ajax, but when trying to get the posted data with PHP the $_POST is empty. Below is the actual function:
function GetSeriesForManufacturer(manuf) {
selectedmanufacturer = manuf;
//Make an AJax Call For Getting Series Of Manufacturer
var series = null;
$.ajax({
type: "POST",
url: url,
data: "{manufacturer:'" + selectedmanufacturer + "'}",
contentType: "application/json", //; charset=utf-8",
dataType: "json",
cache: false,
async: false,
success: function (response) {
//remove loading gif
$(".loading").hide();
//Append Data
AppendSeries($.parseJSON(response.text), selectedmanufacturer);
//Custom Scrollbar Call
$('.MatchingSeries ul').mCustomScrollbar();
},
error: function (XMLHttpRequest, textStatus, errorThrown) { }
});
}
Thanks in advance!

First, you don't need to stringify data. Just send object literal is ok.
data: {manufacturer: selectedmanufacturer},
Second, you don't need this line:
contentType: "application/json",

Let jQuery do the encoding for you:
$.ajax({
type: "POST",
url: url,
data: {
manufacturer: selectedmanufacturer
},
contentType: "application/json", //; charset=utf-8",
dataType: "json",
cache: false,
async: false,
success: function (response) {
...
},
error: function (XMLHttpRequest, textStatus, errorThrown) { }});

How to extract text from JSON response?

I am trying to make url shortener that uses goo.gl API. But i stucked when I have to get short URL from JSON response!
After entering this code in Chrome Console:
var longURL = "http://stackoverflow.com/questions/ask"
$.ajax({
url: 'https://www.googleapis.com/urlshortener/v1/url?shortUrl=http://goo.gl/fbsS&key=AIzaSyANFw1rVq_vnIzT4vVOwIw3fF1qHXV7Mjw',
type: 'POST',
contentType: 'application/json; charset=utf-8',
data: '{ longUrl: "' + longURL +'"}',
dataType: 'json',
success: function(response) {
var result = JSON.parse(response);
}
});
I get following ouptut:
I see that my short URL is in resoinseText.id. How to extract it from there?

You don't need to call JSON.parse(), because jQuery does that automatically when you specify dataType: 'json'. The value you want will then be in the id property of response.
var longURL = "http://stackoverflow.com/questions/ask"
$.ajax({
url: 'https://www.googleapis.com/urlshortener/v1/url?shortUrl=http://goo.gl/fbsS&key=AIzaSyANFw1rVq_vnIzT4vVOwIw3fF1qHXV7Mjw',
type: 'POST',
contentType: 'application/json; charset=utf-8',
data: '{ longUrl: "' + longURL +'"}',
dataType: 'json',
success: function(response) {
console.log(response.id);
}
});

I get null when I pass JSON array with JQuery AJAX

I am facing a problem with the JQuery ajax function.
I am trying to send a simple json through the ajax asshown below.
$.ajax({
url: 'NewFile.jsp',
type: 'GET',
data: {"datasource":"hello1", definition:[{val1:"hello3"}]},
contentType: 'application/json; charset=utf-8',
dataType: 'json',
async: false,
success: function(msg) {
alert("Successfully posted "+JSON.stringify(json));
}
});
The problem is that when I do
System.out.println(request.getParameter("datasource"));
System.out.println(request.getParameter("definition"));
in my NewFile.jsp then I get hello1 for the first and null for the second.
Why I get null value in the second println()?
Thanks

In the url variable inside your ajax object, give the full URL of your request. Like so:
$.ajax({
url: 'www.google.com/',
type: 'GET',
data: {"datasource":"hello1", definition:[{val1:"hello3"}]},
contentType: 'application/json; charset=utf-8',
dataType: 'json',
async: false,
success: function(msg) {
alert("Successfully posted "+JSON.stringify(json));
}
});
Also, always make sure that there is a failure variable inside your object literal, so that you know it happened, but failed. Helps with debugging.