TML:完成頁(yè)面的內(nèi)容展示

CSS：完成頁(yè)面樣式的控制，美化頁(yè)面，完成頁(yè)面的布局。

表單：用于采集用戶輸入的數(shù)據(jù)。用于和服務(wù)器進(jìn)行交互。

form:用于定義表單的。可以定義一個(gè)范圍(代表用戶采集數(shù)據(jù)的范圍)

屬性：action:指定提交數(shù)據(jù)的url(指的就是把數(shù)據(jù)提交到哪里)

method:指定提交方式

分類：一共有7種，2種比較常用。

get:1.請(qǐng)求參數(shù)會(huì)在地址欄顯示

2.請(qǐng)求參數(shù)的長(zhǎng)度是有限制的。

3.請(qǐng)求不安全

post:1.請(qǐng)求參數(shù)不會(huì)在地址欄顯示，會(huì)封裝在請(qǐng)求體中。

2.請(qǐng)求參數(shù)的長(zhǎng)度沒(méi)有限制

3.較為安全

表單里面的數(shù)據(jù)要想被提交，必須指定它的name屬性

TTP中POST提交數(shù)據(jù)的四種方式詳解

首先說(shuō)一下為什么寫這篇文章，以前寫客戶端的時(shí)候，要經(jīng)常調(diào)用后端的接口，一般很多公司的接口，都是統(tǒng)一POST提交方式

服務(wù)端響應(yīng)的是 JSON 格式字符串，方便統(tǒng)一管理，當(dāng)時(shí)對(duì)POST不太清楚，開(kāi)始的時(shí)候，不覺(jué)得有啥

但是真正等到自己寫一個(gè)獨(dú)立的技術(shù)社區(qū)的時(shí)候，也就是 www.helloworld.net ，需要上傳，需要表單提交等

才發(fā)現(xiàn)，不懂這些，用到了的時(shí)候，很是費(fèi)勁，很耽誤時(shí)間。

下面就當(dāng)是復(fù)習(xí)了，學(xué)習(xí)一下GET , POST 這兩種最常用的提交方式

HTTP提交方式有哪些？

HTTP 請(qǐng)求方法有9種，分別是

最常用的還是 GET , POST

HTTP的組成部分

我們知道,http是一個(gè)通信協(xié)議，啥叫通信協(xié)議，通信嘛，就是兩個(gè)人要溝通，協(xié)議嘛，就是怎么溝通

比如我說(shuō)A，你知道我餓了想吃東西了，我再說(shuō) A 米飯， 你就知道我餓了，并且想吃米飯了。

對(duì)的，協(xié)議就是雙方提前商量好的溝通的內(nèi)容的格式

HTTP通信協(xié)議就是 HTTP客戶端和HTTP服務(wù)端 雙方規(guī)定好的格式

那么這個(gè)HTTP消息，有哪幾部分組成呢

很簡(jiǎn)單，HTTP消息包含兩部分

• 請(qǐng)求頭
• 請(qǐng)求體

比如我們?cè)跒g覽器中發(fā)一個(gè)請(qǐng)求www.helloworld.net 回車，此時(shí)我們發(fā)的是GET請(qǐng)求

那么請(qǐng)求頭是：

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請(qǐng)求，是沒(méi)有請(qǐng)求體的，這也就是為什么有些公司統(tǒng)一封裝請(qǐng)求為POST,而不是GET的原因了

因?yàn)镻OST是有請(qǐng)求體的，可以帶大量的數(shù)據(jù)，GET因?yàn)闆](méi)有請(qǐng)求體，攜帶參數(shù)只能放在URL中，能帶的數(shù)據(jù)量是比較少的。

GET 請(qǐng)求方法

GET 訪求方法最常用，也是最簡(jiǎn)單的一種，像其語(yǔ)義一樣，GET 就是獲取文件的意思

所以GET請(qǐng)求就是獲取服務(wù)器上的某個(gè)資源 ，使用也很簡(jiǎn)單，我們記住下面兩點(diǎn)就行了

• GET 傳參數(shù)只能在url后面帶上參數(shù)，比如 http://www.helloworld.net?name=tom&age=23

服務(wù)器收到請(qǐng)求就可以解析出來(lái)url后面帶的參數(shù)了，name=tom , age=23

• 還有一點(diǎn)，很少有人說(shuō)，就是上面我們說(shuō)的，GET請(qǐng)求是沒(méi)有請(qǐng)求體的

下面我們重點(diǎn)看一下POST請(qǐng)求

POST 請(qǐng)求方法

POST 是提交的意思，如果我們需要向服務(wù)器提交一些數(shù)據(jù)，就可以使用POST方法

雖然POST是提交的意思，協(xié)議規(guī)定的也是用POST提交數(shù)據(jù)，但是現(xiàn)在很多公司并沒(méi)有這樣搞

查詢也會(huì)用POST，其實(shí)它只是個(gè)單詞，服務(wù)端收到 請(qǐng)求后，是查詢資源，還是刪除資源，還是提交

都可以的，只是看你們公司前后端怎么規(guī)定即可。

下面我們看看POST有哪幾種提交數(shù)據(jù)的方式

第一種application/x-www-form-urlencoded

這也是POST默認(rèn)的一種方式 ，對(duì)應(yīng)的請(qǐng)求頭中的 Content-Type 為 application/x-www-form-urlencoded

我們從瀏覽器中抓取www.helloworld.net 上的幾個(gè)請(qǐng)求方式，為例，如下

## 請(qǐng)求頭
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

## 請(qǐng)求體
action=10&pageNum=1&pageSize=10&uuid=15139897

此種方式，一般是提交key, value 的值。

第二種：multipart/form-data

我之前把這種當(dāng)作了上面的那種，后來(lái)寫文件上傳的時(shí)候，查了一下，原來(lái) 不是

這種提交方法一般是上傳文件用的多。通常是用在客戶端向服務(wù)端傳送大文件數(shù)據(jù)，如：圖片或者文件。

首先來(lái)解釋下什么它的編碼方式，首先會(huì)生成一個(gè)很長(zhǎng)的 boundary 字符串分界線，表明下面的都是表單內(nèi)容，然后緊接著跟的是表單中的第一個(gè)鍵值對(duì)中的名稱，而后一個(gè)換行，跟著值。然后再生成一個(gè)boundary 字符串分界線，用于分割不同的鍵值。之后就重復(fù)以上操作，詳細(xì)的流程請(qǐng)看下方的例子。

同樣我們以 www.helloworld.net 舉例，我們從里面找個(gè)接口，抓取一下，看看

# 請(qǐng)求頭
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

# 請(qǐng)求體
--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--

從上面我們可以知道，在請(qǐng)求頭中的 Content-Type中，有一個(gè) boundary=e42346452as650adf2345fadade

這個(gè)boundary后面的字符串都是隨機(jī)生成的。用于請(qǐng)求體中數(shù)據(jù)的分段的。

其實(shí)就是個(gè)分隔符的作用。

第三種：application/json

這種就是我們現(xiàn)在用的最多的了，而且也非常方便

在請(qǐng)求頭中設(shè)置 content-type=application/json,就表明請(qǐng)求體中的內(nèi)容格式為json格式

同樣的，服務(wù)端在響應(yīng)的時(shí)候，順應(yīng)頭中也會(huì)添加一個(gè) content-type=application/json

同樣的也是告訴客戶端，我響應(yīng)給你的響應(yīng)體中的內(nèi)容，格式同樣為 json 格式

同的樣我們也參照 www.helloworld.net 中的一個(gè)請(qǐng)求，如下

## 請(qǐng)求頭
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

## 請(qǐng)求體
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語(yǔ)言編程（初級(jí)）",
        "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

這個(gè)一直沒(méi)有遇到過(guò)，很少用

其實(shí)就是請(qǐng)求消息中，請(qǐng)求體中的內(nèi)容格式是純文本xml格式

此種我們就不作介紹

有興趣的可以下面自己查資料

綜上所述，HTTP 的POST四種方法以及GET的簡(jiǎn)單介紹，我們總結(jié)如下：

• GET請(qǐng)求只能在URL中攜帶參數(shù)，別說(shuō)請(qǐng)求頭中也能帶參數(shù)，請(qǐng)求頭中帶參數(shù)，是所有的方法都可以的，不算是GET方法的
• GET請(qǐng)求是沒(méi)有請(qǐng)求體的
• POST提交數(shù)據(jù)有四種方式，分別如下：

1. `application/x-www-form-urlencoded` , 也是默認(rèn)的方式，主要提交的數(shù)據(jù)是key, value 形式的
  2. `multipart/form-data` ，此種方式 是客戶端向服務(wù)端提交大數(shù)據(jù)用的，一般上傳文件等用到。

? 注意這種方式，會(huì)在請(qǐng)求頭中生成一個(gè)boundary字段，其對(duì)應(yīng)的值是一個(gè)隨機(jī)生成的字符串，用于分隔請(qǐng)求體中的數(shù)據(jù)用的

3. application/json 此種方式，用的最多，也是最常用的方式，不過(guò)我在寫www.helloworld.net的過(guò)程中，很少用這種方式
4. 因?yàn)檫@種方式有一個(gè)缺點(diǎn)，就是服務(wù)端在解析的時(shí)候，需要?jiǎng)?chuàng)建大量的結(jié)構(gòu)體或者類。所以最后選擇了第一種的提交方式
5. text/xml 這種就不怎么用了，請(qǐng)求體中是xml格式

簡(jiǎn)單的介紹了一下HTTP的GET,POST的一些知識(shí)，希望對(duì)你們有用。