payload和formData有什麼不一樣？

最近作項目的時候，在經過post請求向服務端發送數據的時候，請求失敗了。錯誤信息以下：

返回的400(bad request)錯誤，說明客戶端這邊發送的請求是有問題的。

和經過jquery中的ajax方法發送的請求做對比。發現問題出在了請求的主體部分。

 

這裏的請求主體部分是payload的形式的。

 

 而直接經過jq,是以下這種formdata形式。

 

formData是什麼?

 formData是客戶端主體部分組裝數據的一種方式，當咱們使用:

1. method='POST'提交一個HTML-Form表單
2. 如上圖中黃色部分的content-Type：application/x-www-form-urlencoded
3. content-Type:multipart/form-data

這三種方式去提交請求主體的時候，就是formData形式。

將如上的請求簡寫一下：

起始行:POST /getProduct HTTP/1.1
首部: Content-Type: application/x-www-form-urlencoded

主體1：productId=3189 單參
主體2：productId=3189&orderId=145 多參

主體的形式會有兩種，在多參數的狀況下，和get請求同樣，是用&進行鏈接的。

$.ajax({
  url : '/v2/product/getProductProp',
  data :{
    'productId': proid,
  },
  type: 'post',
})
.then(function(data) {
  // 成功的回調
})
.fail(function() {
  // 失敗的回調
  that.fetchDataFailed();
})
.done(function() {
  // 請求結束的回調      
});

在jq的ajax模塊中，contentType的默認是使用的formData發送主體的。既然如此的話，咱們就經過傳入自定義的contentType

$.ajax({
  url : '/v2/product/getProductProp',
  data :{
    'productId': proid,
  },
  type: 'post',
  contentType:'application/json' //注意這裏的不一樣
})
.then(function(data) {
  // 成功的回調
})
.fail(function() {
  // 失敗的回調
  that.fetchDataFailed();
})
.done(function() {
  // 請求結束的回調      
});

是的，咱們確實成功的修改了formData的提交形式，變成了payload.

 

payload是什麼?

payload是一種以JSON格式進行數據傳輸的一種方式。

http可能會傳輸payload，若是不限制其請求的方式(那麼請求的方法就是OPTIONS)或者響應的狀態碼，其包含元數據，頭部區域和數據。

若是數據是經過正常的put或者post方法發送的，那麼payload就是一個http請求起始行緊接一個CRLF後面的那一部分。

起始行:POST /getProduct HTTP/1.1
首部: Content-Type: application/json

主體1：{"productId":3189} 單參
主體2：{"productId":3189,"orderId":145} 多參

一樣的，咱們能夠將payload形式的參數。經過formData()來組裝。

 經過formData()組裝後的數據就像表單數據同樣，變成了鍵/值對的形式。

小結

• 首部屬性contentType能夠改變請求的數據提交方式：application/json(payload)，application/x-www-form-urlencoded(formData)
• 服務端的響應方式決定客戶端的提交方式
• 使用formData()能夠經過payload提交表單數據:multipart/form-data