jQuery posting valid json in request body

brad picture brad · Nov 11, 2010 · Viewed 243.3k times · Source

So according to the jQuery Ajax docs, it serializes data in the form of a query string when sending requests, but setting processData:false should allow me to send actual JSON in the body. Unfortunately I'm having a hard time determining first, if this is happening and 2nd what the object looks like that is being sent to the server. All I know is that the server is not parsing what I'm sending.

When using http client to post an object literal {someKey:'someData'}, it works. But when using jQuery with data: {someKey:'someData'}, it fails. Unfortunately when I analyze the request in Safari, it says the message payload is [object Object] ... great... and in Firefox the post is blank...

When logging the body content on the Java side it literally gets [object Object] so how does one send REAL JSON data??

Has anyone had experience with a Java service serializing JSON data in the request body, with the request sent from jQuery?

BTW here is the full $.ajax request:

$.ajax({
    contentType: 'application/json',
    data: {
        "command": "on"
    },
    dataType: 'json',
    success: function(data){
        app.log("device control succeeded");
    },
    error: function(){
        app.log("Device control failed");
    },
    processData: false,
    type: 'POST',
    url: '/devices/{device_id}/control'
});

Answer

Nick Craver picture Nick Craver · Nov 11, 2010

An actual JSON request would look like this:

data: '{"command":"on"}',

Where you're sending an actual JSON string. For a more general solution, use JSON.stringify() to serialize an object to JSON, like this:

data: JSON.stringify({ "command": "on" }),

To support older browsers that don't have the JSON object, use json2.js which will add it in.


What's currently happening is since you have processData: false, it's basically sending this: ({"command":"on"}).toString() which is [object Object]...what you see in your request.