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

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


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:

$.ajax({    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.


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.

$.ajax({    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.


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,          INSTANCE : "HTHACKNEY",          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};        //console.log(data);       $.ajax({            type: "POST",           url:   "http://www.domian.com/webservicepgm?callback=?",           data:  data,           dataType:'jsonp'       }).       done(function(data){         //handle data.WHATEVER       });