如何使用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 
      }); 
    }); 
}