html中表單的使用以及get和post的區別

TML:完成頁面的內容展示

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

表單：用于采集用戶輸入的數據。用于和服務器進行交互。

form:用于定義表單的?？梢远x一個范圍(代表用戶采集數據的范圍)

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

method:指定提交方式

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

get:1.請求參數會在地址欄顯示

2.請求參數的長度是有限制的。

3.請求不安全

post:1.請求參數不會在地址欄顯示，會封裝在請求體中。

2.請求參數的長度沒有限制

3.較為安全

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

. 發送表單數據的Get和Post兩種方式介紹

很多情況下，需要傳遞一些信息，從瀏覽器到Web服務器，最終到后臺程序瀏覽器使用兩種方法可將這些信息傳遞到Web服務器，分別為Get方法和Post方法。

（1）Get方法

1）Get方法向后臺發送數據的格式：

Get 方法向頁面請求發送已編碼的用戶信息。頁面和已編碼的信息中間用 ? 字符分隔，如下所示：

http://www.test.com/hello?key1=value1&key2=value2

2）Get方法傳遞數據的注意事項：

Get 方法是默認的從瀏覽器向 Web 服務器傳遞信息的方法，它會產生一個很長的字符串，出現在瀏覽器的地址欄中。如果您要向服務器傳遞的是密碼或其他的敏感信息，請不要使用 Get 方法。
Get 方法有大小限制：請求字符串中最多只能有 1024 個字符。

3）servlet處理get數據的方法：

這些信息使用 QUERY_STRING 頭傳遞，并可以通過 QUERY_STRING 環境變量訪問，Servlet 使用 doGet()方法處理這種類型的請求。

（2）Post方法

另一個向后臺程序傳遞信息的比較可靠的方法是 POST 方法。

1）Post發送數據的形式：

Post 方法打包信息的方式與 Get 方法基本相同，但是 Post 方法不是把信息作為 URL 中 ? 字符后的文本字符串進行發送，而是把這些信息作為一個單獨的消息。

2）servlet處理post數據的方法：

消息以標準輸出的形式傳到后臺程序，您可以解析和使用這些標準輸出。Servlet 使用 doPost() 方法處理這種類型的請求。

2. Servlet中讀取表單具體參數的方法介紹

Servlet 處理表單數據，這些數據會根據不同的情況使用不同的方法自動解析：

getParameter()：您可以調用 request.getParameter() 方法來獲取表單參數的值。
getParameterValues()：如果參數出現一次以上，則調用該方法，并返回多個值，例如復選框。
getParameterNames()：如果您想要得到當前請求中的所有參數的完整列表，則調用該方法。

3. 使用URL的Get方法的代碼實戰

第一步：在webtest工程的src目錄下創建包：

com.web.test

第二步：在該包下創建類：HelloFormInGetUrl，代碼實例如下：

第三步：啟動tomcat訪問,訪問鏈接是：

http://localhost:8080/webtest/HelloFormInGetUrl?name=aaa&url=www.test.com

效果如下：

4. 使用表單的Get方法的代碼實戰

下面是一個簡單的實例，使用 HTML 表單和提交按鈕傳遞兩個值。我們將使用相同的 Servlet（即上邊的HelloFormInGetUrl類）來處理輸入。

5. 使用表單的Post方法的代碼實戰

第一步：在webtest工程的src目錄下創建包：

com.web.test

第二步：在該包下創建類：HelloFormInPost，代碼實例如下：

第三步：在WebContent目錄下創建post.html

第四步：啟動tomcat訪問，訪問鏈接如下：

http://localhost:8080/webtest/post.html

效果如下：

第五步：在文本框中輸入信息，點擊提交，后如下：

此頭條號每天都會分享非常實用的技術文章和筆試題講解，歡迎大家關注此頭條號！

TTP中POST提交數據的四種方式詳解

首先說一下為什么寫這篇文章，以前寫客戶端的時候，要經常調用后端的接口，一般很多公司的接口，都是統一POST提交方式

服務端響應的是 JSON 格式字符串，方便統一管理，當時對POST不太清楚，開始的時候，不覺得有啥

但是真正等到自己寫一個獨立的技術社區的時候，也就是 www.helloworld.net ，需要上傳，需要表單提交等

才發現，不懂這些，用到了的時候，很是費勁，很耽誤時間。

下面就當是復習了，學習一下GET , POST 這兩種最常用的提交方式

HTTP提交方式有哪些？

HTTP 請求方法有9種，分別是

序號	方法	描述
1	GET	請求指定的頁面信息，并返回實體主體。
2	HEAD	類似于 GET 請求，只不過返回的響應中沒有具體的內容，用于獲取報頭
3	POST	向指定資源提交數據進行處理請求（例如提交表單或者上傳文件）。數據被包含在請求體中。POST 請求可能會導致新的資源的建立和/或已有資源的修改。
4	PUT	從客戶端向服務器傳送的數據取代指定的文檔的內容。
5	DELETE	請求服務器刪除指定的頁面。
6	CONNECT	HTTP/1.1 協議中預留給能夠將連接改為管道方式的代理服務器。
7	OPTIONS	允許客戶端查看服務器的性能。
8	TRACE	回顯服務器收到的請求，主要用于測試或診斷。
9	PATCH	是對 PUT 方法的補充，用來對已知資源進行局部更新。

最常用的還是 GET , POST

HTTP的組成部分

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

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

對的，協議就是雙方提前商量好的溝通的內容的格式

HTTP通信協議就是 HTTP客戶端和HTTP服務端雙方規定好的格式

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

很簡單，HTTP消息包含兩部分

請求頭
請求體

比如我們在瀏覽器中發一個請求www.helloworld.net 回車，此時我們發的是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請求，是沒有請求體的，這也就是為什么有些公司統一封裝請求為POST,而不是GET的原因了

因為POST是有請求體的，可以帶大量的數據，GET因為沒有請求體，攜帶參數只能放在URL中，能帶的數據量是比較少的。

GET 請求方法

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

所以GET請求就是獲取服務器上的某個資源，使用也很簡單，我們記住下面兩點就行了

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

服務器收到請求就可以解析出來url后面帶的參數了，name=tom , age=23

還有一點，很少有人說，就是上面我們說的，GET請求是沒有請求體的

下面我們重點看一下POST請求

POST 請求方法

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

雖然POST是提交的意思，協議規定的也是用POST提交數據，但是現在很多公司并沒有這樣搞

查詢也會用POST，其實它只是個單詞，服務端收到請求后，是查詢資源，還是刪除資源，還是提交

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

下面我們看看POST有哪幾種提交數據的方式

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

這也是POST默認的一種方式，對應的請求頭中的 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

我之前把這種當作了上面的那種，后來寫文件上傳的時候，查了一下，原來不是

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

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

同樣我們以 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后面的字符串都是隨機生成的。用于請求體中數據的分段的。

其實就是個分隔符的作用。

第三種：application/json

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

在請求頭中設置 content-type=application/json,就表明請求體中的內容格式為json格式

同樣的，服務端在響應的時候，順應頭中也會添加一個 content-type=application/json

同樣的也是告訴客戶端，我響應給你的響應體中的內容，格式同樣為 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

我們看一下響應體：

{
  "code": 1,
  "data": {
    "hasMore": false,
    "list": [
      {
        "uuid": "5441523000",
        "title": "區塊鏈原理和應用",
        "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": "獲取數據成功",
  "errMessage": ""
}

第四種：text/xml

這個一直沒有遇到過，很少用

其實就是請求消息中，請求體中的內容格式是純文本xml格式

此種我們就不作介紹

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

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

GET請求只能在URL中攜帶參數，別說請求頭中也能帶參數，請求頭中帶參數，是所有的方法都可以的，不算是GET方法的
GET請求是沒有請求體的
POST提交數據有四種方式，分別如下：

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

? 注意這種方式，會在請求頭中生成一個boundary字段，其對應的值是一個隨機生成的字符串，用于分隔請求體中的數據用的

application/json 此種方式，用的最多，也是最常用的方式，不過我在寫www.helloworld.net的過程中，很少用這種方式
因為這種方式有一個缺點，就是服務端在解析的時候，需要創建大量的結構體或者類。所以最后選擇了第一種的提交方式
text/xml 這種就不怎么用了，請求體中是xml格式

簡單的介紹了一下HTTP的GET,POST的一些知識，希望對你們有用。

在線咨詢

上一篇：JS的封裝
下一篇：CSS與JavaScript的區別是什么？

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商