前端进阶必学——HTTP请求中的Form Data与Request Payload的区别

我不是女神ヾ 2021-09-19 07:16 341阅读 0赞

前端开发中经常会用到AJAX发送异步请求，对于POST类型的请求会附带请求数据。而常用的两种传参方式为：Form Data 和 Request Payload。

![1018462-20170920093039978-2100563214.png][]

![1018462-20170920093047056-655827777.png][]

# GET请求 #

使用get请求时，参数会以key=value的形式拼接在请求的url后面。例如：

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> </td> 
   <td> <p><code>http://m.baidu.com/address/getlist.html?limit=50&amp;offset=0&amp;t=1502345139870</code></p> </td> 
  </tr> 
 </tbody> 
</table>

但是受限于请求URL的长度限制，一般参数较少时会使用get请求。

# POST请求 #

当参数数量较多，且对数据有一定安全性要求时，会考虑用post请求传递参数数据。POST请求的参数数据是在请求体中。

## 方式一： Form Data形式 ##

当POST请求的请求头里设置Content-Type: application/x-www-form-urlencoded(默认), 参数在请求体以标准的Form Data的形式提交，以&符号拼接，参数格式为key=value&key=value&key=value...

![1018462-20170920093132150-1553778311.png][]

前端代码设置：

xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded'); xhr.send('a=1&b=2&c=3');

在servlet中，后端可以通过request.getParameter(name)的形式来获取表单参数。

## 方式二：Request Payload形式 ##

如果使用AJAX原生POST请求,请求头里设置Content-Type:application/json，请求的参数会显示在Request Payload中，参数格式为JSON格式：\{"key":"value","key":"value"...\}，这种方式可读性会更好。

![1018462-20170920093208759-1131445967.png][]

后端可以使用getRequestPayload方法来获取。

# Form Data 和 Request Payload 区别 #

1.  如果请求头里设置Content-Type: application/x-www-form-urlencoded，那么这个请求被认为是表单请求，参数出现在Form Data里，格式为key=value&key=value&key=value...
2.  原生的AJAX请求头里设置Content-Type:application/json，或者使用默认的请求头Content-Type:text/plain;参数会显示在Request payload块里提交。

[1018462-20170920093039978-2100563214.png]: /images/20210812/0822e869bf86423bb443938748a9285a.png
[1018462-20170920093047056-655827777.png]: /images/20210812/9bf2fe4912eb4f8b950c4b20f2c41aad.png
[1018462-20170920093132150-1553778311.png]: /images/20210812/1e32bc2234e24518bb4333504909475e.png
[1018462-20170920093208759-1131445967.png]: /images/20210812/e549e5fa80bc411c8641a3313e9af684.png