如何使用 JQuery 发布 JSON 数据？答案

【问题标题】：How can I use JQuery to post JSON data?如何使用 JQuery 发布 JSON 数据？
【发布时间】：2011-09-09 11:11:02
【问题描述】：

我想将 Json 发布到同一服务器上的 Web 服务。但我不知道如何使用 JQuery 发布 Json。我试过这段代码：

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

但是使用这个 JQuery 代码，数据不会在服务器上作为 Json 接收。这是服务器上的预期数据：{"name":"jonas"}，但使用 JQuery，服务器接收 name=jonas。或者换句话说，它是“urlencoded”数据，而不是 Json。

有什么方法可以使用 JQuery 以 Json 格式发布数据而不是 urlencoded 数据？还是我必须使用手动 ajax 请求？

【问题讨论】：

标签： jquery json ajax http-post

【解决方案1】：

你传递的是一个对象，不是一个 JSON 字符串。当你传递一个对象时，jQuery 使用$.param 将对象序列化为名称-值对。

如果将数据作为字符串传递，则不会被序列化：

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

【讨论】：

请使用 $.post 而不是 $.ajax。
@user3746259 你为什么要使用$.post 呢？它是 (a) 只是 $.ajax 的包装器，并且 (b) 无法执行此处所需的操作（即 contentType 属性）。
直到，你知道，jQuery 3，也就是说，它仍然在未来现在，不要介意这个答案是在四年前写的 i>.
@lonesomeday 谢谢。我有同样的问题，将对象转换为字符串后，它工作了。
@lonesomeday 即使在 3.2 中我也不得不使用您的方法来强制 contentType 为 json。 耸耸肩

【解决方案2】：

根据 lonesomeday 的回答，我创建了一个包含某些参数的 jpost。

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

用法：

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

【讨论】：

【解决方案3】：

您可以使用 ajax 发布数据：

 $.ajax({
   url: "url", 
   type: "POST",
   dataType: "json",
   contentType: "application/json; charset=utf-8",
   data: JSON.stringify({ name: 'value1', email: 'value2' }),
   success: function (result) {
       // when call is sucessfull
    },
    error: function (err) {
    // check the err for error details
    }
 }); // ajax call closing

【讨论】：

【解决方案4】：

我尝试了 Ninh Pham 的解决方案，但在我对其进行调整之前它对我不起作用 - 见下文。删除 contentType 并且不要对你的 json 数据进行编码

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

【讨论】：

这不会发布 JSON 请求正文

【解决方案5】：

最佳答案效果很好，但我建议在发布之前将 JSON 数据保存到变量中，这样在发送长表单或处理大数据时会更简洁一些。

var Data = {
"name":"jonsa",
"e-mail":"qwerty@gmail.com",
"phone":1223456789
};


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

【讨论】：

您忘记字符串化数据

【解决方案6】：

使用Promise 并检查body 对象是否是有效的JSON。如果不是，则返回 Promise reject。

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
            });
    });
}

【讨论】：