如何使用JQuery发布JSON数据？

Question

我想将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。

有没有办法以Json格式发布数据，而不是使用JQuery的urlencoded数据？或者我必须使用手动ajax请求？

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

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

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