JS之表單提交時編碼型別enctype詳解

2021-09-07 15:37:01 字數 3587 閱讀 6857

根據查詢的資料得到如下總結:

multipart/form-data: 窗體資料被編碼為一條訊息,頁上的每個控制項對應訊息中的乙個部分

text/plain: 窗體資料以純文字形式進行編碼,其中不含任何控制項或格式字元。

http/1.1 協議規定的 http 請求方法有 options、get、head、post、put、delete、trace、connect 這幾種。其中 post 一般用來向服務端提交資料,本文主要討論 post 提交資料的幾種方式。

我們知道,http 協議是以 ascii 碼傳輸,建立在 tcp/ip 協議之上的應用層規範。規範把 http 請求分為三個部分:狀態行、請求頭、訊息主體。類似於下面這樣:

協議規定 post 提交的資料必須放在訊息主體(entity-body)中,但協議並沒有規定資料必須使用什麼編碼方式。實際上,開發者完全可以自己決定訊息主體的格式,只要最後傳送的 http 請求滿足上面的格式就可以。

但是,資料傳送出去,還要服務端解析成功才有意義。一般服務端語言如 php、python 等,以及它們的 framework,都內建了自動解析常見資料格式的功能。服務端通常是根據請求頭(headers)中的 content-type 欄位來獲知請求中的訊息主體是用何種方式編碼,再對主體進行解析。所以說到 post 提交資料方案,包含了 content-type 和訊息主體編碼方式兩部分。

熟悉表單元素的小夥伴,對其中的屬性enctype一定不會陌生,就是它規定了對表單提交給伺服器時表單資料編碼的內容型別(content type)。

知道了表單編碼由enctype決定的,那麼它究竟有多少可選的取值呢?是不是所有的mime型別它都能用呢?

實際上,根據html5 規範中所敘述的,enctype具有以下三種選項,其中最後一項text/plain是相比4.01新增的。

multipart/form-data

text/plain

這是預設的編碼型別,使用該型別時,會將表單資料中非字母數字的字元轉換成轉義字元,如"%hh",然後組合成這種形式key1=value1&key2=value2

可以得到 sub 陣列。

注意:若表單中有檔案,則只留檔名。

這又是乙個常見的 post 資料提交的方式。我們使用表單上傳檔案時,必須讓 表單的enctype等於 multipart/form-data。直接來看乙個請求示例:

content-disposition: form-data; name="enterprisename"有限責任公司

------webkitformboundaryaqwxpqycfmbahgph

content-disposition: form-data; name="unifiedsocialcreditcode"91530700781667237g

------webkitformboundaryaqwxpqycfmbahgph--

注意:

這個例子稍微複雜點。首先生成了乙個 boundary 用於分割不同的字段,為了避免與正文內容重複,boundary 很長很複雜。然後 content-type 裡指明了資料是以 multipart/form-data 來編碼,本次請求的 boundary 是什麼內容。訊息主體裡按照字段個數又分為多個結構類似的部分,每部分都是以--boundary開始,緊接著是內容描述資訊,然後是回車,最後是字段具體內容(文字或二進位制)。如果傳輸的是檔案,還要包含檔名和檔案型別資訊。訊息主體最後以--boundary--標示結束。關於 multipart/form-data 的詳細定義,請前往 rfc1867 檢視。

這種方式一般用來上傳檔案,各大服務端語言對它也有著良好的支援。

按照鍵值對排列表單資料key1=value1\r\nkey2=value2,不進行轉義。

注意:若表單中有檔案,則只留檔名。

json 格式支援比鍵值對複雜得多的結構化資料,這一點也很有用。記得我幾年前做乙個專案時,需要提交的資料層次非常深,我就是把資料 json 序列化之後來提交的。不過當時我是把 json 字串作為 val,仍然放在鍵值對里,以 x-www-form-urlencoded 方式提交。

google 的 angularjs 中的 ajax 功能,預設就是提交 json 字串。例如下面這段**:

最終傳送的請求是:

當然 angularjs 也可以配置為使用 x-www-form-urlencoded 方式提交資料。如有需要,可以參考這篇文章。

注:1.mime (multipurpose internet mail extensions) 是描述訊息內容型別的網際網路標準。

想要了解詳細的mime 型別列表,請參考《w3school:mime 參考手冊》

所以,enctype可以認為就是表單資料的content type(mime type),只不過其取值不能用除了上面提到的三個,否則會轉換成預設的編碼。

表單資料提交時的字元編碼問題

人老了,以前研究過的東西都忘記了。所以還是記錄下來比較好。廢話不說,url 翠花 url 上 如果你總是使用utf 8編碼,則基本不用為編碼問題傷腦筋。但是總有些時候,事情超出了你的掌控範圍。通常表單提交時將按照文件本身的編碼進行編碼。如果是乙個gb2312的文件,如何按照utf 8編碼提交呢?此外...

js提交表單及js表單驗證

1 js 字串長度限制 判斷字元長度 js限制輸入 限制不能輸入 textarea 長度限制 2 js驗證郵箱格式 3 js遮蔽關鍵字 這裡遮蔽 和 4 js兩次輸入密碼是否相同 5 js遮蔽右鍵 nc ntextmenu return false ndragstart return false o...

js提交表單及js表單驗證

if document.a.b.value.length 50 alert 不能超過 50個字元!document.a.b.focus return false 2 js驗證郵箱格式 3 js遮蔽關鍵字 這裡遮蔽 和 4 js兩次輸入密碼是否相同 with document.all if input...