http請求參數之Query String Parameters、Form Data、Request Payload

HTTP請求中不一樣的請求方式和設置不一樣的Content-Type時，參數傳遞的方式會不同，一塊兒瞭解這三種形式：Query String Parameters、Form Data、Request Payload；

GET請求

Query String Parameters

GET請求時，參數會以url string 的形式進行傳遞，即?後的字符串則爲其請求參數，並以&做爲分隔符。 General

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

Query String Parameters

from_type=省&from_name=‘四川省’
複製代碼

Post請求

post請求會出現兩種形式的請求體：

FormData

當發起一次Post請求，若未指定Content-type，則默認content-type爲application/x-www-form-urlencoded,即參數會以FormData的形式進行傳遞，不會顯示出如今請求URL中。

Request Payload

當發起一次post請求，若Content-Type爲application/json，則參數會以Request Payload的形式進行傳遞（數據格式爲json）,不會顯示出如今請求url中。

formData()方法

服務器爲何會對錶單提交和文件上傳作特殊處理，由於表單提交數據是名值對的方式，且Content-Type爲application/x-www-form-urlencoded,而文件上傳服務器須要特殊處理，普通的post請求（Content-Type不是application/x-www-form-urlencoded）數據格式不固定，不必定是名值對的方式，因此服務器沒法知道具體的處理方式，因此只能經過獲取原始數據流的方式來進行解析。

當咱們遇到一些文件上傳功能時，咱們須要使用原生的formData()來進行數據組裝，且content-type須要設置爲multipart/formdata http請求頭：

Request URL: http://test.com/upload
Request Method: POST
複製代碼

其中，WebKitFormBoundarysBkB6WoEBvbCRkmh爲瀏覽器隨機生成的boundary，做爲分隔參數，做用等同於&。

HTTP POST 表單請求提交時，使用的Content-Type是application/x-www-form-urlencoded，而使用原生AJAX的POST請求若是不指定請求頭RequestHeader,默認使用的Content-Type是text/plain;charset=UTF-8。

因此，在使用原生AJAX POST請求時，須要明確設置Request Header,即：

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