前端技巧之HTTP中POST提交數(shù)據(jù)四種方式
HTTP中POST提交數(shù)據(jù)的四種方式詳解
首先說一下為什么寫這篇文章，以前寫客戶端的時候，要經(jīng)常調(diào)用后端的接口，一般很多公司的接口，都是統(tǒng)一POST提交方式
服務(wù)端響應(yīng)的是 JSON 格式字符串，方便統(tǒng)一管理，當時對POST不太清楚，開始的時候，不覺得有啥
但是真正等到自己寫一個獨立的技術(shù)社區(qū)的時候，也就是 www.helloworld.net ，需要上傳，需要表單提交等
才發(fā)現(xiàn)，不懂這些，用到了的時候，很是費勁，很耽誤時間。
下面就當是復(fù)習(xí)了，學(xué)習(xí)一下GET , POST 這兩種最常用的提交方式
HTTP提交方式有哪些？
HTTP 請求方法有9種，分別是
| 序號 | 方法 | 描述 |
|---|---|---|
| 1 | GET | 請求指定的頁面信息，并返回實體主體。 |
| 2 | HEAD | 類似于 GET 請求，只不過返回的響應(yīng)中沒有具體的內(nèi)容，用于獲取報頭 |
| 3 | POST | 向指定資源提交數(shù)據(jù)進行處理請求（例如提交表單或者上傳文件）。數(shù)據(jù)被包含在請求體中。POST 請求可能會導(dǎo)致新的資源的建立和/或已有資源的修改。 |
| 4 | PUT | 從客戶端向服務(wù)器傳送的數(shù)據(jù)取代指定的文檔的內(nèi)容。 |
| 5 | DELETE | 請求服務(wù)器刪除指定的頁面。 |
| 6 | CONNECT | HTTP/1.1 協(xié)議中預(yù)留給能夠?qū)⑦B接改為管道方式的代理服務(wù)器。 |
| 7 | OPTIONS | 允許客戶端查看服務(wù)器的性能。 |
| 8 | TRACE | 回顯服務(wù)器收到的請求，主要用于測試或診斷。 |
| 9 | PATCH | 是對 PUT 方法的補充，用來對已知資源進行局部更新 。 |
最常用的還是 GET , POST
HTTP的組成部分
我們知道,http是一個通信協(xié)議，啥叫通信協(xié)議，通信嘛，就是兩個人要溝通，協(xié)議嘛，就是怎么溝通
比如我說A，你知道我餓了想吃東西了，我再說 A 米飯， 你就知道我餓了，并且想吃米飯了。
對的，協(xié)議就是雙方提前商量好的溝通的內(nèi)容的格式
HTTP通信協(xié)議就是 HTTP客戶端和HTTP服務(wù)端 雙方規(guī)定好的格式
那么這個HTTP消息，有哪幾部分組成呢
很簡單，HTTP消息包含兩部分
- 請求頭
- 請求體
比如我們在瀏覽器中發(fā)一個請求www.helloworld.net 回車，此時我們發(fā)的是GET請求
那么請求頭是：
GET / HTTP/2 Host: www.helloworld.net User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:106.0) Gecko/20100101 Firefox/106.0 Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,*/*;q=0.8 Accept-Language: en-US,en;q=0.5 Accept-Encoding: gzip, deflate, br Connection: keep-alive Cookie: Hm_lvt_c7e77fd22dddf4a169b8d6f4807c5a4c=1668406379; Hm_lpvt_c7e77fd22dddf4a169b8d6f4807c5a4c=1668406379 Upgrade-Insecure-Requests: 1 Sec-Fetch-Dest: document Sec-Fetch-Mode: navigate Sec-Fetch-Site: none Sec-Fetch-User: ?1 If-None-Match: "d696-1nnZwKI6/LZalqvEzQx9IFil/tw" TE: trailers
注意： HTTP 的GET請求，是沒有請求體的，這也就是為什么有些公司統(tǒng)一封裝請求為POST,而不是GET的原因了
因為POST是有請求體的，可以帶大量的數(shù)據(jù)，GET因為沒有請求體，攜帶參數(shù)只能放在URL中，能帶的數(shù)據(jù)量是比較少的。
GET 請求方法
GET 訪求方法最常用，也是最簡單的一種，像其語義一樣，GET 就是獲取文件的意思
所以GET請求就是獲取服務(wù)器上的某個資源 ，使用也很簡單，我們記住下面兩點就行了
- GET 傳參數(shù)只能在url后面帶上參數(shù)，比如
http://www.helloworld.net?name=tom&age=23
? 服務(wù)器收到請求就可以解析出來url后面帶的參數(shù)了，name = tom , age = 23
- 還有一點，很少有人說，就是上面我們說的，GET請求是沒有請求體的
下面我們重點看一下POST請求
POST 請求方法
POST 是提交的意思，如果我們需要向服務(wù)器提交一些數(shù)據(jù)，就可以使用POST方法
雖然POST是提交的意思，協(xié)議規(guī)定的也是用POST提交數(shù)據(jù)，但是現(xiàn)在很多公司并沒有這樣搞
查詢也會用POST，其實它只是個單詞，服務(wù)端收到 請求后，是查詢資源，還是刪除資源，還是提交
都可以的，只是看你們公司前后端怎么規(guī)定即可。
下面我們看看POST有哪幾種提交數(shù)據(jù)的方式
第一種：application/x-www-form-urlencoded
這也是POST默認的一種方式 ，對應(yīng)的請求頭中的 Content-Type 為 application/x-www-form-urlencoded
我們從瀏覽器中抓取www.helloworld.net 上的幾個請求方式，為例，如下
## 請求頭 POST /v1/special/getSpecialCateList HTTP/2 Host: tiger-api.helloworld.net User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:106.0) Gecko/20100101 Firefox/106.0 Accept: application/json, text/plain, */* Accept-Language: en-US,en;q=0.5 Accept-Encoding: gzip, deflate, br Content-Type: application/x-www-form-urlencoded Authorization: token: ts: 1668407094 sign: d41d8cd98f00b204e9800998ecf8427e deviceType: pc Origin: https://www.helloworld.net Connection: keep-alive Referer: https://www.helloworld.net/ Cookie: Hm_lvt_c7e77fd22dddf4a169b8d6f4807c5a4c=1668406379; Hm_lpvt_c7e77fd22dddf4a169b8d6f4807c5a4c=1668406398 Sec-Fetch-Dest: empty Sec-Fetch-Mode: cors Sec-Fetch-Site: same-site Content-Length: 0 ## 請求體 action=10&pageNum=1&pageSize=10&uuid=15139897
此種方式，一般是提交key, value 的值。
第二種：multipart/form-data
我之前把這種當作了上面的那種，后來寫文件上傳的時候，查了一下，原來 不是
這種提交方法一般是上傳文件用的多。通常是用在客戶端向服務(wù)端傳送大文件數(shù)據(jù)，如：圖片或者文件。
首先來解釋下什么它的編碼方式，首先會生成一個很長的 boundary 字符串分界線，表明下面的都是表單內(nèi)容，然后緊接著跟的是表單中的第一個鍵值對中的名稱，而后一個換行，跟著值。然后再生成一個boundary 字符串分界線，用于分割不同的鍵值。之后就重復(fù)以上操作，詳細的流程請看下方的例子。
同樣我們以 www.helloworld.net 舉例，我們從里面找個接口，抓取一下，看看
# 請求頭 POST http://www.helloworld.net/xyz HTTP/1.1 Host: www.helloworld.net User-Agent: python-requests/2.24.0 Accept-Encoding: gzip, deflate Accept: */* Content-Type: multipart/form-data; boundary=e42346452as650adf2345fadade Content-Length: 222 Connection: keep-alive # 請求體 --e42346452as650adf2345fadade Content-Disposition: form-data; name="field0" value1 --e42346452as650adf2345fadade Content-Disposition: form-data; name="field1" value2 --e42346452as650adf2345fadade-- Content-Disposition: form-data; name="field2"; filename="filename" Content-Type: text/plain --e42346452as650adf2345fadade--
從上面我們可以知道，在請求頭中的 Content-Type中，有一個 boundary=e42346452as650adf2345fadade
這個boundary后面的字符串都是隨機生成的。用于請求體中數(shù)據(jù)的分段的。
其實就是個分隔符的作用。
第三種：application/json
這種就是我們現(xiàn)在用的最多的了，而且也非常方便
在請求頭中設(shè)置 content-type=application/json,就表明請求體中的內(nèi)容格式為json格式
同樣的，服務(wù)端在響應(yīng)的時候，順應(yīng)頭中也會添加一個 content-type=application/json
同樣的也是告訴客戶端，我響應(yīng)給你的響應(yīng)體中的內(nèi)容，格式同樣為 json 格式
同的樣我們也參照 www.helloworld.net 中的一個請求，如下
## 請求頭 POST /v1/special/getSpecialList HTTP/2 Host: tiger-api.helloworld.net User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:106.0) Gecko/20100101 Firefox/106.0 Accept: application/json, text/plain, */* Accept-Language: en-US,en;q=0.5 Accept-Encoding: gzip, deflate, br Content-Type: application/json Authorization: token: ts: 1668408188 sign: 08fab32346193fa92037b5ca5f9ed592 deviceType: pc Content-Length: 30 Origin: https://www.helloworld.net Connection: keep-alive Referer: https://www.helloworld.net/ Cookie: Hm_lvt_c7e77fd22dddf4a169b8d6f4807c5a4c=1668406379,1668408042,1668408051; Hm_lpvt_c7e77fd22dddf4a169b8d6f4807c5a4c=1668408051 Sec-Fetch-Dest: empty Sec-Fetch-Mode: cors Sec-Fetch-Site: same-site TE: trailers ## 請求體 action=10&pageNum=1&sortType=0
我們看一下響應(yīng)體：
{
"code": 1,
"data": {
"hasMore": false,
"list": [
{
"uuid": "5441523000",
"title": "區(qū)塊鏈原理和應(yīng)用",
"totalCount": 0,
"chapterCount": 1,
"readCount": 0,
"subscribeCount": 1,
"createTime": "0001-01-01T00:00:00Z",
"status": 0,
"profile": "1037883613",
"nicker": "小天",
"avatar": "https://img-hello-world.oss-cn-beijing.aliyuncs.com/imgs/d04d513fbea19f6cb7c3b4beee3c7f5e.jfif",
"subscribed": false
},
{
"uuid": "bbatgp",
"title": "C語言編程（初級）",
"totalCount": 0,
"chapterCount": 19,
"readCount": 2938,
"subscribeCount": 1,
"createTime": "0001-01-01T00:00:00Z",
"status": 0,
"profile": "80662724",
"nicker": "Suzhou",
"avatar": "https://img-hello-world.oss-cn-beijing.aliyuncs.com/imgs/d04d513fbea19f6cb7c3b4beee3c7f5e.jfif",
"subscribed": false
}
]
},
"message": "獲取數(shù)據(jù)成功",
"errMessage": ""
}第四種：text/xml
這個一直沒有遇到過，很少用
其實就是請求消息中，請求體中的內(nèi)容格式是純文本xml格式
此種我們就不作介紹
有興趣的可以下面自己查資料
綜上所述，HTTP 的POST四種方法以及GET的簡單介紹，我們總結(jié)如下：
- GET請求只能在URL中攜帶參數(shù)，別說請求頭中也能帶參數(shù)，請求頭中帶參數(shù)，是所有的方法都可以的，不算是GET方法的
- GET請求是沒有請求體的
POST提交數(shù)據(jù)有四種方式，分別如下：
1. `application/x-www-form-urlencoded` , 也是默認的方式，主要提交的數(shù)據(jù)是key, value 形式的
2. `multipart/form-data` ，此種方式 是客戶端向服務(wù)端提交大數(shù)據(jù)用的，一般上傳文件等用到。
? 注意這種方式，會在請求頭中生成一個boundary字段，其對應(yīng)的值是一個隨機生成的字符串，用于分隔請求體中的數(shù)據(jù)用的
application/json 此種方式，用的最多，也是最常用的方式，不過我在寫www.helloworld.net的過程中，很少用這種方式
因為這種方式有一個缺點，就是服務(wù)端在解析的時候，需要創(chuàng)建大量的結(jié)構(gòu)體或者類。所以最后選擇了第一種的提交方式
text/xml 這種就不怎么用了，請求體中是xml格式
簡單的介紹了一下HTTP的GET,POST的一些知識，希望對你們有用。
也當作自己的筆記，怕記不住，方便查詢
以上就是前端技巧之HTTP中POST提交數(shù)據(jù)四種方式的詳細內(nèi)容，更多關(guān)于前端HTTP POST提交數(shù)據(jù)的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
javascript 彈出的窗口返回值給父窗口具體實現(xiàn)
這篇文章主要介紹了javascript 彈出的窗口返回值給父窗口具體實現(xiàn)，有需要的朋友可以參考一下2013-11-11
做項目時遇到一個數(shù)據(jù)表需要展示，由于堅定著使用合理標簽表示合適內(nèi)容，于是使用了table，悲劇開始了。2010-01-01
微信jssdk踩坑之簽名錯誤invalid signature
這篇文章主要介紹了微信jssdk踩坑之簽名錯誤invalid signature，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05
Javascript實現(xiàn)滑塊滑動改變值的實現(xiàn)代碼
一個功能,值得一說的是本頁面的滑塊實現(xiàn)由于對美工不是很熟悉所以上圖了,感興趣的朋友可以了解下哈2013-04-04
javascript獲取元素文本內(nèi)容的通用函數(shù)
獲取元素文本內(nèi)容的通用函數(shù)，思路很好值得參考。2009-12-12
在小程序云開發(fā)中，要實現(xiàn)上傳文件至云存儲，有兩種方案：云函數(shù)和HTTP?API，本文主要講講如何使用HTTP?API實現(xiàn)小程序外上傳文件至云存儲，感興趣的可以了解一下2022-01-01
本文通過實例代碼給大家介紹了js中實現(xiàn)復(fù)選框全選功能，代碼簡單易懂，非常不錯，需要的朋友參考下2016-12-12
Bootstrap Table 在指定列中添加下拉框控件并獲取所選值
通過 bootstrap-table 的Column 配置項中的formatter，將獲取到的數(shù)據(jù)轉(zhuǎn)換為包含數(shù)據(jù)的 select 控件。然后根據(jù)用戶選擇項更新對應(yīng)單元格數(shù)據(jù)，最后通過getallselection方法獲取所選行數(shù)據(jù)2017-07-07
這篇文章主要介紹了JS重載實現(xiàn)方法,結(jié)合實例形式分析了javascript重載的實現(xiàn)與使用方法,需要的朋友可以參考下2016-12-12
如果在使用javascript的時候涉及到event處理，就需要知道event在不同的瀏覽器中的差異。2009-12-12