javascript - jQuery: How to stop AJAX function escaping JSON string used to POST data

Question

I need to serialize all inputs from a form into a JSON string.
With the help of this post, I can successfully create a valid string as below:

{"input01":"value01","input02":"value02","input03":"value03"}

However, when I try to use the string to POST data using jQuery's Ajax function, it seems to add backslashes to the string, resulting in the JSON string being sent using GET rather than POST. The loaded PHP page returns a $_GET array of:

[{"input01":"value01","input02":"value02","input03":"value03"}] =>

I have tested the JSON string using alert() to confirm the structure is correct before being used in the AJAX function.
Additionally, if I just manually type in the valid JSON string, the AJAX posts the data correctly.

My code is as follows:

var dataJSON = $.toJSON($('#form').serializeObject());
alert(dataJSON);

$.ajax({
    type: "POST",
    url: "ajax.php",
    data: 'Query01=01&Query02=02',
    dataType: 'json',
    success: function(data){
       if (data==1){
         $('#wrap').load('ajax.php',dataJSON);
       }
    }
});

Answer 1

This is the default behaviour of $.ajax(). You can change it by setting the processData option to false. See $.ajax() options.

data  Object, String

Data to be sent to the server. It is converted to a query string, if not already a string. It's appended to the url for GET-requests. See processData option to prevent this automatic processing. Object must be Key/Value pairs. If value is an Array, jQuery serializes multiple values with same key i.e. {foo:["bar1", "bar2"]} becomes '&foo=bar1&foo=bar2'.

and

processData   Boolean Default: true

By default, data passed in to the data option as an object (technically, anything other than a string) will be processed and transformed into a query string, fitting to the default content-type "application/x-www-form-urlencoded". If you want to send DOMDocuments, or other non-processed data, set this option to false.