HTTP請(qǐng)求中不同的請(qǐng)求方式和設(shè)置不同的Content-Type時(shí)，參數(shù)傳遞的方式會(huì)不一樣，一起了解這三種形式：Query String Parameters、Form Data、Request Payload；

GET請(qǐng)求

Query String Parameters

GET請(qǐng)求時(shí)，參數(shù)會(huì)以u(píng)rl string 的形式進(jìn)行傳遞，即?后的字符串則為其請(qǐng)求參數(shù)，并以&作為分隔符。 General

Request URL: http://test.com?from_type=省&from_name='四川省'
Request Method: GET

Query String Parameters

from_type=省&from_name=‘四川省’

image.png

Post請(qǐng)求

post請(qǐng)求會(huì)出現(xiàn)兩種形式的請(qǐng)求體：

FormData

當(dāng)發(fā)起一次Post請(qǐng)求，若未指定Content-type，則默認(rèn)content-type為application/x-www-form-urlencoded,即參數(shù)會(huì)以FormData的形式進(jìn)行傳遞，不會(huì)顯示出現(xiàn)在請(qǐng)求URL中。

image.png

Request Payload

當(dāng)發(fā)起一次post請(qǐng)求，若Content-Type為application/json，則參數(shù)會(huì)以Request Payload的形式進(jìn)行傳遞（數(shù)據(jù)格式為json）,不會(huì)顯示出現(xiàn)在請(qǐng)求url中。

image.png

formData()方法

服務(wù)器為什么會(huì)對(duì)表單提交和文件上傳做特殊處理，因?yàn)楸韱翁峤粩?shù)據(jù)是名值對(duì)的方式，且Content-Type為application/x-www-form-urlencoded,而文件上傳服務(wù)器需要特殊處理，普通的post請(qǐng)求（Content-Type不是application/x-www-form-urlencoded）數(shù)據(jù)格式不固定，不一定是名值對(duì)的方式，所以服務(wù)器無(wú)法知道具體的處理方式，所以只能通過(guò)獲取原始數(shù)據(jù)流的方式來(lái)進(jìn)行解析。

當(dāng)我們遇到一些文件上傳功能時(shí)，我們需要使用原生的formData()來(lái)進(jìn)行數(shù)據(jù)組裝，且content-type需要設(shè)置為multipart/formdata http請(qǐng)求頭：

Request URL: http://test.com/upload
Request Method: POST

image.png

其中，WebKitFormBoundarysBkB6WoEBvbCRkmh為瀏覽器隨機(jī)生成的boundary，作為分隔參數(shù)，作用等同于&。

HTTP POST 表單請(qǐng)求提交時(shí)，使用的Content-Type是application/x-www-form-urlencoded，而使用原生AJAX的POST請(qǐng)求如果不指定請(qǐng)求頭RequestHeader,默認(rèn)使用的Content-Type是text/plain;charset=UTF-8。

所以，在使用原生AJAX POST請(qǐng)求時(shí)，需要明確設(shè)置Request Header,即：

xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');