How can I use JQuery to post JSON data?

问题:

I would like to post Json to a web service on the same server. But I don\'t know how to post Json using JQuery. I have tried with this code:

$.ajax({
    type: \'POST\',
    url: \'/form/\',
    data: {\"name\":\"jonas\"},
    success: function(data) { alert(\'data: \' + data); },
    contentType: \"application/json\",
    dataType: \'json\'
});

But using this JQuery code the data is not received as Json on the server. This is the expected data at the server: {\"name\":\"jonas\"} but using JQuery the server receive name=jonas. Or in other words, it\'s \"urlencoded\" data and not Json.

Is there any way to post the data in Json format instead of urlencoded data using JQuery? Or do I have to use a manual ajax request?

回答1:

You\'re passing an object, not a JSON string. When you pass an object, jQuery uses $.param to serialize the object into name-value pairs.

If you pass the data as a string, it won\'t be serialized:

$.ajax({
    type: \'POST\',
    url: \'/form/\',
    data: \'{\"name\":\"jonas\"}\', // or JSON.stringify ({name: \'jonas\'}),
    success: function(data) { alert(\'data: \' + data); },
    contentType: \"application/json\",
    dataType: \'json\'
});

回答2:

Base on lonesomeday\'s answer, I create a jpost that wraps certain parameters.

$.extend({
    jpost: function(url, body) {
        return $.ajax({
            type: \'POST\',
            url: url,
            data: JSON.stringify(body),
            contentType: \"application/json\",
            dataType: \'json\'
        });
    }
});

Usage:

$.jpost(\'/form/\', { name: \'Jonh\' }).then(res => {
    console.log(res);
});

回答3:

I tried Ninh Pham\'s solution but it didn\'t work for me until I tweaked it - see below. Remove contentType and don\'t encode your json data

$.fn.postJSON = function(url, data) {
    return $.ajax({
            type: \'POST\',
            url: url,
            data: data,
            dataType: \'json\'
        });

回答4:

The top answer worked fine but I suggest saving your JSON data into a variable before posting it is a little bit cleaner when sending a long form or dealing with large data in general.

var Data = {
\"name\":\"jonsa\",
\"e-mail\":\"[e-mail]\",
\"phone\":1223456789
};


$.ajax({
    type: \'POST\',
    url: \'/form/\',
    data: Data,
    success: function(data) { alert(\'data: \' + data); },
    contentType: \"application/json\",
    dataType: \'json\'
});

回答5:

Using Promise and checking if the body object is a valid JSON. If not a Promise reject will be returned.

var DoPost = function(url, body) {
    try {
        body = JSON.stringify(body);
    } catch (error) {
        return reject(error);
    }
    return new Promise((resolve, reject) => {
        $.ajax({
                type: \'POST\',
                url: url,
                data: body,
                contentType: \"application/json\",
                dataType: \'json\'
            })
            .done(function(data) {
                return resolve(data);
            })
            .fail(function(error) {
                console.error(error);
                return reject(error);
            })
            .always(function() {
                // called after done or fail
            });
    });
}