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.

Answer 2

After scouring Google and the jQuery site, i've come to the personal conclusion that the $.load function will convert any variable passed to it as a querystring (As my original problem above outlined). If you wish to pass a JSON string through it, it has to be manually typed.

To get around this, I used the low level $.ajax function instead. An advantage of using this method meant I could also send POST data using the standard .serialize() function rather than having to convert my form data into JSON.

My final code:

var formData = $('#form').serialize();

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

If anyone else has a solution, please comment.