通过AJAX发送JSON时的奇怪行为

Question

I am encountering some really strange behavior when sending JSON over AJAX.

JSON data:

data = {
    "name": "box1",
    "comment": ["fragile"],
    "type_A": [
        {
            "item": "1",
            "attr": [
                "big",
                "red"
            ]
        },
        {
            "item": "2",
            "attr": [
                "small",
                "red"
            ]
        },
    ],
    "type_B": [],
    "misc": {}
};

POST request:

$.ajax({
    url: url,
    type: "POST",
    // data: JSON.stringify(data),
    data: data,
    success: function (result) {
        console.log("inside success");
    },
    error: function (error) {
        console.log("inside error");
    }
});

If I pass in data here without JSON.stringify() , the empty fields type_B and misc get lost/stripped away. But if I do use JSON.stringify() then the backend cannot parse it properly without JSON.parse() . Is there a way to not strip away empty fields without doing a JSON.parse() in the backend?

I tried adding contentType: "application/json" and dataType: "json" to the request but didn't help.

Answer 1

What you have labeled "JSON data" is not JSON. It is a JavaScript object literal. It is part of JavaScript source code. It is not a JSON data file.

When you use jQuery's Ajax functions you can pass a few different things to data .

If you pass it an object, then jQuery will Form URL Encode it.

URL Encoded data has no standard way to represent anything other than a set of flat key=value pairs.

PHP introduced an extension which lets you express arrays and associative arrays by using square brackets in the key names. For example:

array[]=item1&array[]=item2

Each items in the array is represented by a copy of the key.

If you have no items, then there are no keys of that name.

If you use this method of encoding data then you cannot express empty arrays. The closest you could come would be to have an array containing a zero length string.

If you pass it a string, then jQuery will just send it as is.

Using JSON.stringify will convert your object to a string containing JSON data.

JSON is capable of expressing empty arrays.

PHP, however, will not automatically parse JSON formatted requests.

So…

Is there a way to not strip away empty fields without doing a JSON.parse() in the backend?

No. There isn't. You either use a format which doesn't support empty fields, or you use a format which PHP won't automatically parse for you.

I tried adding contentType: "application/json"

This tells the server that the data you are sending is encoded as JSON. If you are sending JSON then you should include this.

It doesn't alter the data you send. You need to encode the data as JSON yourself.

and dataType: "json" to the request but didn't help.

This tells the server that you expect the response to the request to contain JSON. It also tells jQuery to ignore the content-type of the response and parse it as JSON whatever the server says it is.

It has no effect on the data you send.

Answer 2

Jquery processes your data before sending and uses the request's post formdata instead of putting JSON in the body of the request.

To avoid this, use processData: false and contentType: 'application/json' :

$.ajax({
    url: url,
    type: "POST",
    processData: false,
    contentType: 'application/json',
    data: JSON.stringify(data),
    success: function (result) {
        console.log("inside success");
    },
    error: function (error) {
        console.log("inside error");
    }
});