JQuery Post sends form data and not JSON

Question

Trying to send json. Here's my function:

var object = ... ;

$.ajax({
      type: 'POST',
      url: '<url>',
      contentType: 'application/json; charset=utf-8',
      dataType: 'json',
      data: object
    });

But whenever I check Chrome, it always sends it as query params:

Request Payload:
startDate=Wed+Dec+19+2012+19%3A00%3A00+GMT-0500+(EST)&endDate=Thu+Dec+20+2012+19%3A00%3A00+GMT-0500+(EST)&

How do I get it to send as JSON?

Answer 1

With JSON.stringify(object)

Sample:

$.ajax({
    type: 'POST',
    url: '<url>',
    contentType: 'application/json; charset=utf-8',
    dataType: 'json',
    data: JSON.stringify(object)
});

Note JSON.stringify is not supported in all browsers ( http://caniuse.com/#feat=json ), in particular browsers IE7 and lower.

If you need to support this browsers too you can use this Javascript library: https://github.com/douglascrockford/JSON-js

Answer 2

Stringify using JSON.stringify(object)

Modify the data field to:

...
data: JSON.stringify(object),
...

The way you are doing it, IMO, jQuery sees the parameter as a dictionary (key-value pairs), and constructs a percentile-encoded string from that; and hence you see that output.

Answer 3

I have found it easier to send data in default 'application/x-www-form-urlencoded' format with JSON as a field like this:

$.ajax({
    type: 'POST',
    url: '<url>',
    dataType: 'json',
    data: {json:JSON.stringify(object)}
});

On server use the regular method to receive field called json .

Just shared to see if this is valid for you.