sending a post request with json data that contains a list

Question

Solved. The solution is to set contentType to 'application/json' and use the JSON.stringify(obj) instead of obj, but you may then have to change how you get the data on your server, depending on the language or framework. Original question below...

Here's what I'm trying

var obj = {
    'firstName': 'bill',
    'lastName': 'johnson',
    'hobbies': ['apples', 'dogs']
    });
$.ajax({
    type: 'POST',
    url: '/myurl'
    data: obj,
    success: function(data){alert(data);}
    });

If I alert/log a JSON.stringify(obj), I get the correct result, i.e.:

{'firstName': 'bill', 'lastName': 'johnson', 'hobbies': ['apples', 'dogs']}

However, when I do the above ajax call, my server gets the following:

{'firstName': 'bill', 'lastName': 'johnson', 'hobbies[]': 'apples'}

Which clearly is not proper json. I've tried adding various contentType arguments but then my server actually gets nothing (an empty post request).

I also tried setting the data argument to a pre-stringified string of JSON (which is correct), but then jquery escapes it and my server gets this:

{"{\"firstName\":\"bill\",\"lastName\":\"johnson\",\"hobbies\":[\"apples\",\"dogs\"]}": ""}

I tried setting processData to false and that changes nothing.

I've researched this for hours and haven't gotten it to work. Surely there's a way to send json with lists to the server...

any tips?

Solution

From your post that looks correct to me, I am somewhat new to JSON myself but it looks like its treating the last key-value pair as an array, to access the individual elements you would have to use the correct index to access the value. from json.org JSON is built on two structures: •A collection of name/value pairs. In various languages, this is realized as an object, record, struct, dictionary, hash table, keyed list, or associative array. •An ordered list of values. In most languages, this is realized as an array, vector, list, or sequence. you could check it on jsonlint.com if you still think something is wrong.

Comments

[d-coder]

Send the obj as JSON.stringify(obj). If required, deserialize the same at server side or some html decode stuff.

[mgilson]

How does the server want to get it? You could send the data as JSON rather than x-www-form-urlencoded ... benjamin-schweizer.de/jquerypostjson.html -- And here's a little more background reading: stackoverflow.com/questions/2845459/…

[user3391564]

@mgilson the server wants to get it as raw, unescaped json, like {"firstname": "bill"... etc., though that could change if necessary. I'll try the code in the blog post.

[dev1234]

check the answer here : stackoverflow.com/questions/16574482/…

[user3391564]

@mgilson unfortunately the code in the blogpost doesn't work for me. If I set the contentType argument, my server gets an empty request.

[mgilson]

@user3391564 -- I doubt it gets an empty request. The problem is that most frameworks are expecting x-www-form-urlencoded data. If you actually look at the request body, the JSON will be in there (which you may need to parse yourself). I recently ran into this problem when dealing with requests from angular's $http (since it posts the json as application/json which actually makes some sense...)

[user3391564]

@mgilson Yes, you're right. Upon further investigation it's not empty. It seems to be getting the correct json and I just need to figure out how to get it from the response object.

[monu]

Its is not a php code ... You should use JSON.stringify(array) and then send to ajax data and use dataType as "json"

[user3391564]

I've tried only stringifying the arrays, but then I get {"hobbies": "["apples", "dogs"]"}. Also, isn't dataType actually for the expected data type of the response, not the request?

[monu]

@user3391564 I think this is what you want. What do you mean bydataType actually for the expected data type of the response, not the request?

[user3391564]

I think setting the dataType has no effect on the request, but rather on the interpretation of the data and hence the object that is passed to the success function. With the code you suggested I still get all the \'s. traditional: true doesn't seem to change that.