Send JSON data using jQuery

Question

Why is the code below sent as City=Moscow&Age=25 instead of the JSON format?

 var arr = {City:'Moscow', Age:25}; $.ajax( { url: "Ajax.ashx", type: "POST", data: arr, dataType: 'json', async: false, success: function(msg) { alert(msg); } } ); 

Answer 1

Because you did not specify either the type of request content or the correct JSON request. Here is the correct way to send a JSON request:

 var arr = { City: 'Moscow', Age: 25 }; $.ajax({ url: 'Ajax.ashx', type: 'POST', data: JSON.stringify(arr), contentType: 'application/json; charset=utf-8', dataType: 'json', async: false, success: function(msg) { alert(msg); } }); 

Remarks:

• Using the JSON.stringify method to convert a javascript object to a JSON string, which is native and embedded in modern browsers. If you want to support older browsers, you may need to enable json2.js
• Specifying the type of request content using the contentType property to tell the server the purpose of sending the JSON request
• The dataType: 'json' property is used for the type of response you expect from the server. jQuery is smart enough to guess from the Content-Type server response header. Therefore, if you have a web server that more or less supports HTTP and responds to your request, Content-Type: application/json jQuery will automatically parse the response in the javascript object in the success callback, so you do not need to specify dataType .

Caution:

• What you call arr is not an array . This is a javascript object with properties ( City and Age ). Arrays are indicated by the [] symbol in javascript. For example, [{ City: 'Moscow', Age: 25 }, { City: 'Paris', Age: 30 }] is an array of two objects.

Answer 2

Since, by default, jQuery serializes the objects passed as the data parameter to $.ajax . It uses $.param to convert the data into a query string.

From jQuery docs for $.ajax :

[ data argument] is converted to a query string, if not already a string

If you want to send JSON, you have to code it yourself:

 data: JSON.stringify(arr); 

Please note that JSON.stringify present only in modern browsers. For old support, check out json2.js

Answer 3

I wrote a short convenient function to host JSON.

 $.postJSON = function(url, data, success, args) { args = $.extend({ url: url, type: 'POST', data: JSON.stringify(data), contentType: 'application/json; charset=utf-8', dataType: 'json', async: true, success: success }, args); return $.ajax(args); }; $.postJSON('test/url', data, function(result) { console.log('result', result); }); 

Answer 4

It is serialized so that the URI can by default read pairs of name values ​​in a POST request. You can try setting processData: false to your parameter list. Not sure if this will help.

Answer 5

You need to establish the correct type of content and fine-tune it.

 var arr = {City:'Moscow', Age:25}; $.ajax({ url: "Ajax.ashx", type: "POST", data: JSON.stringify(arr), dataType: 'json', async: false, contentType: 'application/json; charset=utf-8', success: function(msg) { alert(msg); } });