如何使用JQuery发布JSON数据?


73

我想将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时,服务器receive name=jonas。换句话说,它是“ urlencoded”数据,而不是Json。

有什么方法可以使用JQuery以Json格式发布数据,而不是未编码的数据?还是我必须使用手动ajax请求?

Answers:


145

您正在传递一个对象,而不是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'
});

3
请使用$ .post代替$ .ajax。
user3746259

17
@ user3746259为什么要使用$.post它?它是(a)仅包装器,$.ajax并且(b)无法执行此处要求的操作(即,contentType属性)。
lonesomeday

5
直到您知道jQuery 3(即现在仍在将来)之前,再也不要介意四年前编写此答案时。
lonesomeday

@lonesomeday谢谢。我遇到了同样的问题,将对象转换为字符串后,它起作用了。
林格夫人(Dame Lyngdoh)

@lonesomeday我甚至必须在3.2中使用您的方法来将contentType强制为json。耸耸肩
Lo-Tan

10

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

-1

我尝试了Ninh Pham的解决方案,但直到我对其进行调整后,它才对我有用-参见下文。删除contentType并且不对您的json数据进行编码

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

1
这不会发布JSON请求正文
Phil

-2

最佳答案很好用,但我建议在发送长格式或一般处理大数据时,将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'
});


2
您忘记了对数据进行字符串化
Phil

-3

使用Promise并检查body对象是否为有效JSON。如果没有,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
            });
    });
}
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.