How to send JSON instead of a query string with $.ajax?

How to send JSON instead of a query string with $.ajax?

Can someone explain in an easy way how to make jQuery send actual JSON instead of a query string?
url : url,
dataType : ‘json’, // I was pretty sure this would do the trick
data : data,
type : ‘POST’,
complete : callback // etc

This will in fact convert your carefully prepared JSON to a query string. One of the annoying things is that any array: [] in your object will be converted to array[]: [], probably because of limitations of the query sting.


Solution 1:

You need to use JSON.stringify to first serialize your object to JSON, and then specify the contentType so your server understands it’s JSON. This should do the trick:

    url: url,
    type: "POST",
    data: JSON.stringify(data),
    contentType: "application/json",
    complete: callback

Note that the JSON object is natively available in browsers that support JavaScript 1.7 / ECMAScript 5 or later. If you need legacy support you can use json2.

Related:  'innerText' works in IE, but not in Firefox

Solution 2:

No, the dataType option is for parsing the received data.

To post JSON, you will need to stringify it yourself via JSON.stringify and set the processData option to false.

    url: url,
    type: "POST",
    data: JSON.stringify(data),
    processData: false,
    contentType: "application/json; charset=UTF-8",
    complete: callback

Note that not all browsers support the JSON object, and although jQuery has .parseJSON, it has no stringifier included; you’ll need another polyfill library.

Solution 3:

While I know many architectures like ASP.NET MVC have built-in functionality to handle JSON.stringify as the contentType my situation is a little different so maybe this may help someone in the future. I know it would have saved me hours!

Since my http requests are being handled by a CGI API from IBM (AS400 environment) on a different subdomain these requests are cross origin, hence the jsonp. I actually send my ajax via javascript object(s). Here is an example of my ajax POST:

 var data = {USER : localProfile,  
        PAGE : $('select[name="PAGE"]').val(), 
        TITLE : $("input[name='TITLE']").val(), 
        HTML : html,
        STARTDATE : $("input[name='STARTDATE']").val(), 
        ENDDATE : $("input[name='ENDDATE']").val(),
        ARCHIVE : $("input[name='ARCHIVE']").val(), 
        ACTIVE : $("input[name='ACTIVE']").val(), 
        URGENT : $("input[name='URGENT']").val(), 
        AUTHLST :  authStr};
            type: "POST",
           url:   "",
           data:  data,
         //handle data.WHATEVER

Solution 4:

If you are sending this back to and need the data in request.form[] then you’ll need to set the content type to “application/x-www-form-urlencoded; charset=utf-8”

Related:  Cross-Browser Javascript XML Parsing

Original post here

Secondly get rid of the Datatype, if your not expecting a return the POST will wait for about 4 minutes before failing. See here