current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
stack overflow careers
Sign up ×
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other. Join them, it only takes a minute:
up vote 70 down vote favorite
16

Can someone explain in an easy way how to make jQuery send actual json in stead of a querystring?

$.ajax({
    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 querystring. One of the annoying things is that any array: [] in your object will be converted to array[]: [], probably because of limitations of the querysting.

-update-

The proper method can be found in the answers below:

$.ajax({
    url        : url,
    dataType   : 'json',
    contentType: 'application/json; charset=UTF-8', // This is the money shot
    data       : data,
    type       : 'POST',
    complete   : callback // etc
});

Please note that this requires proper CORS headers server-side, and contrary to some examples on the net, Allow-Headers cannot use wildcards. (Allow-Origin can.)

{
    Content-Type                 : 'application/json', 
    Access-Control-Allow-Origin  : '*', 
    Access-Control-Allow-Headers : 'Content-Type' // You cannot use '*'
}

-update-

Please note that jQuery will now send TWO requests, one to complete the handshake and one with the actual content. This is for your own security, somehow.

So keep in mind if you want your server to be versatile, using a QueryString sends only one request. Using true JSON sends at least two requests, one for the handshake.

This was messing with my head, so I thought I'd let you (the potential reader) know in advance.

share|improve this question
4  
The dataType has no bearing on how the data is sent. It merely specifies what the type of data is you expect to have returned by the call. If you want to indicate to the server what the type of data is you are specifying in the data property you need to set the contentType property similar to contentType: "application/json" – François Wahl Oct 2 '12 at 16:05
    
Thanks for clarifying. But in that case, why do I need to specify the response type client-side if the server is providing a content-type header in the response? – Redsandro Oct 2 '12 at 20:20
1  
You don't have to specify it, by default jQuery will try and make an intelligent guess based on the MIME type of the response. However, by specifying it you are telling jQuery explicitly what type you are expecting from the server and jQuery will attempt to convert the response to an object of that type. Not specifying it and leaving jQuery take a guess may result in jQuery converting the response into an unexpected format, even though you sent JSON from the server. Check the documentation for more details on the dataType: api.jquery.com/jQuery.ajax – François Wahl Oct 2 '12 at 22:08

3 Answers 3

up vote 91 down vote accepted

You need to use JSON.stringify to first serialize your object to JSON, and then specify the content-type 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.

share|improve this answer
8  
This will not work, you're missing contentType: 'application/json'. – Ohgodwhy Oct 2 '12 at 16:04
    
@Ohgodwhy Oh yeah. That went a bit too fast ;) – Marcus Ekwall Oct 2 '12 at 16:05
1  
There we go, now it'll work. +1 – Ohgodwhy Oct 2 '12 at 16:06
    
Thanks. I thought dataType took care of this, but I got that backwards. Any thoughts on specifying charset in the content-type like Bergi did in the other answer? – Redsandro Oct 2 '12 at 20:17
3  
@Redsandro That shouldn't be necessary. According to jQuery docs: POST data will always be transmitted to the server using UTF-8 charset, per the W3C XMLHTTPRequest standard – Marcus Ekwall Oct 3 '12 at 10:47
up vote 13 down vote

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.

share|improve this answer
2  
Setting processData to false isn't necessary since JSON.stringify already returns a string. – Marcus Ekwall Oct 2 '12 at 16:10
    
@MarcusEkwall: Afaik it still would be encodeURIComponented, wouldn't it? – Bergi Oct 2 '12 at 16:11
    
OK, it might not be needed, but do you really think it would make the request fail? – Bergi Oct 2 '12 at 16:18
    
It shouldn't make it fail, considering it's a string already. – Kevin B Oct 2 '12 at 17:47
1  
@Redsandro: Yeah, it's doing an "intelligent guess". However, the reason for the parameter is not (only) that people want to make it strict, but more that they don't set appropriate MIME types in their server responses. – Bergi Oct 2 '12 at 21:43
up vote 1 down vote

If you are sending this back to asp.net 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"

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

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.