Setting processData to false in jQuery breaks my AJAX request

I've googled for a while now and can only find what processData: false does. I can't find anyone who has experienced this same issue.

I'm passing JSON back to the server and do not want jQuery to automatically convert the data to a query string so I'm setting processData to false. I can see the request firing if I take out processData, but as soon as I put it in I do not see any requests being made (using Firebug & Chrome dev tools).

$.ajax({
            url: myUrl,
            type: "POST",
            data: {foo: "bar"},
            processData: false,
            contentType: 'application/json'
        });

The request I was initially making was a bit more complex than this but I've simplified it to try to narrow down the problem but this simple piece of code does not work either (again, it does work if I comment out processData). Also, I am not seeing any JavaScript errors in the console.

Edit

For future web searchers: As lonesomeday pointed out, jQuery will not throw any errors if you supply either a JS object or an incorrectly formatted JSON string. It will simply not fire the request.


You want to pass the data as JSON. You are passing a Javascript object. JSON is a way of serializing Javascript objects to strings so that they can be passed around without compatibility issues.

You actually want to pass the JSON in a string:

$.ajax({
    url: myUrl,
    type: "POST",
    data: '{"foo": "bar"}',
    processData: false,
    contentType: 'application/json'
});

Actually, processData by default assumes that data passed is an object and sends it as application/x-www-form-urlencoded.

Summing up everything said above by @lonesomeday and @vsm to send raw JSON (what is different from the form data) you need to:

$.ajax({
    url: 'http://here-i.am/send-me/an/angel', // Determining far end
    data: JSON.stringify({foo: "bar"}), // Obtaining proper JSON string from data object
    processData: false, // Preventing default data parse behavior
    contentType: "application/json" // Setting proper `ContentType` for our data
    ...
});

Figure I'd add my current understanding (as of a few hours..)

  • ProcessData = true : convert an object's name value pairs into a URL encoding, or an array's objects into name value pairs, or take a string as a literal.
  • ProcessData = false: take a string as a literal, or call an object's ToString() method.

On top of the ProcessData = true, by setting the 'traditional' flag, it can send it using a recursive encoding that captures complex structures, or a flat name value pair list.

So with respect to the OP, it worked without specifying processData since the default is true. So it converted the name value pairs in the object to a URLEncoded form. When you add the line back in, it calls your object's toString() method. Since you don't have a URL encoded string being returned by a toString() method (you have none), you will get a string such as "[object Object]". Perhaps jQuery cannot send strings that aren't URL encoded, or does not use the inherited toString() method.

The two solutions presented convert the object to a JSON string, and thus there is no processing, and thus processData does nothing. The contentType setting helps the server understand what is being sent.

In addition, one person commented that processing adds the encoded properties to the URL. Not quite: It sends that data via the most appropriate method; GET means appended to the URL, and POST means a urlencoded http body.