如何使用JQuery发布JSON数据?

时间:2011-06-06 16:50:33

标签: jquery ajax json post http-post

我想将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请求?

6 个答案:

答案 0 :(得分:125)

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

答案 1 :(得分:8)

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

答案 2 :(得分:0)

您可以使用 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

答案 3 :(得分:-1)

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

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

答案 4 :(得分:-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'
});

答案 5 :(得分:-3)

使用margin-top: 600px; white-space:nowrap; 并检查Promise对象是否是有效的JSON。如果不是,将返回承诺body

reject