資訊專欄INFORMATION COLUMN
摘要：以下引用，摘自規(guī)范的章節(jié)這不就是我們在回調(diào)函數(shù)里判斷返回數(shù)據(jù)的類型，并且是在請求頭中的那個玩意兒嗎沒錯就是它根據(jù)規(guī)范的基礎數(shù)據(jù)類型的說明，這個指定了連接資源的屬性，同時也是的那些媒體類型。今天掰扯完了表單提交時的編碼類型，以及它和的關系。
很早以前，當還沒有前端這個概念的時候，我在寫表單提交完全不去理會表單數(shù)據(jù)的編碼，在action屬性里寫好目標URL，剩下的啊交給瀏覽器吧~但是現(xiàn)在，更多時候我們都采用Ajax方式提交數(shù)據(jù)，這種原始的方式僅僅被當成優(yōu)雅降級的產(chǎn)物。
當我們用異步方式提交表單，就需要稍微關注一下表單數(shù)據(jù)的編碼問題了。回想一下，在寫回調(diào)函數(shù)時是不是有根據(jù)過請求的Content-Type寫不同業(yè)務邏輯的經(jīng)歷，那這個Content-Type和表單的編碼有什么聯(lián)系嗎？有沒有在明明前端已經(jīng)發(fā)數(shù)據(jù)給后端了，后端的小伙伴死活取不到數(shù)據(jù)的情況？這些糾結(jié)的問題背后的原因真是困擾了我好久，今天在篇文章里就要把它們掰扯清楚！
是什么決定了表單的編碼？熟悉表單元素的小伙伴，對其中的屬性enctype一定不會陌生，就是它規(guī)定了對表單提交給服務器時表單數(shù)據(jù)編碼的內(nèi)容類型(Content Type)。以下引用，摘自HTML 4.01規(guī)范的Form章節(jié)：
enctype = content-type [CI]
This attribute specifies the content type used to submit the form to the server
content type？這不就是我們在回調(diào)函數(shù)里判斷返回數(shù)據(jù)的類型，并且是在請求頭中的那個玩意兒嗎？！沒錯！就是它！根據(jù)HTML 4.01規(guī)范的基礎數(shù)據(jù)類型的說明，這個content type指定了連接資源的屬性，同時也是MIME type的那些媒體類型。
表單編碼類型知道了表單編碼由enctype決定的，那么它究竟有多少可選的取值呢？是不是所有的MIME類型它都能用呢？
實際上，根據(jù)HTML5 規(guī)范中所敘述的，enctype具有以下三種選項，其中最后一項text/plain是相比4.01新增的。
application/x-www-form-urlencoded
multipart/form-data
text/plain
application/x-www-form-urlencoded這是默認的編碼類型，使用該類型時，會將表單數(shù)據(jù)中非字母數(shù)字的字符轉(zhuǎn)換成轉(zhuǎn)義字符，如"%HH"，然后組合成這種形式key1=value1&key2=value2；所以后端在取數(shù)據(jù)后，要進行解碼。
注意：
若表單中有文件，則只留文件名；
multipart/form-data該類型用于高效傳輸文件、非ASCII數(shù)據(jù)和二進制數(shù)據(jù)，將表單數(shù)據(jù)逐項地分成不同的部分，用指定的分割符分割每一部分。每一部分都擁有Content-Disposition頭部，指定了該表單項的鍵名和一些其他信息；并且每一部分都有可選的Content-Type，不特殊指定就為text/plain。下面給出一個采用multipart/form-data編碼類型的例子：
Content-Type: multipart/form-data; boundary=AaB03x --AaB03x Content-Disposition: form-data; name="submit-name" Larry --AaB03x Content-Disposition: form-data; name="files"; filename="file1.txt" Content-Type: text/plain ... contents of file1.txt ... --AaB03x--
注意：
一般來說，method和enctype是兩個不同的互不影響的屬性，但在傳文件時，method必須要指定為POST，否則文件只剩下filename了；
當沒有傳文件時，enctype會改回默認的application/x-www-form-urlencoded。
text/plain按照鍵值對排列表單數(shù)據(jù)key1=value1 key2=value2，不進行轉(zhuǎn)義。
注意：
若表單中有文件，則只留文件名；
application/json及其他MIME類型另外，還需要說明表單數(shù)據(jù)編碼類型application/json，已經(jīng)被W3C遺棄（詳見HTML JSON Form Submission），建議不要在中使用了，即使用了如果瀏覽器不支持，也會替換成application/x-www-form-urlencoded。
同理，其余的MIME類型，也不支持，均會替換成默認編碼application/x-www-form-urlencoded。
PS：貌似現(xiàn)在瀏覽器都不支持了，我先用了下面幾個瀏覽器：
FF43：Mozilla/5.0 (Macintosh; Intel Mac OS X 10.11; rv:43.0) Gecko/20100101 Firefox/43.0
Chrome49, Safari9.1：Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/49.0.2623.87 Safari/537.36
IE6, 8
后記所以，enctype可以認為就是表單數(shù)據(jù)的content type(MIME type)，只不過其取值不能用除了上面提到的三個，否則會轉(zhuǎn)換成默認的編碼。
今天掰扯完了表單提交時的編碼類型enctype，以及它和content type、MIME type的關系。下次再總結(jié)一下Ajax提交表單的類型吧。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/49810.html
摘要：格式支持比鍵值對復雜得多的結(jié)構(gòu)化數(shù)據(jù)，這一點也很有用。例如下面這段代碼最終發(fā)送的請求是這種方案，可以方便的提交復雜的結(jié)構(gòu)化數(shù)據(jù)，特別適合的接口。 簡介 form的enctype屬性為編碼方式，常用有兩種：application/x-www-form-urlencoded和multipart/form-data，默認為application/x-www-form-urlencoded。 ...
摘要：表單中的屬性，可以告訴服務器，我們提供給它的內(nèi)容的類型。屬性值表單中的屬性常用值，有以下三種注意或元素中，若使用會覆蓋屬性。表單只支持和請求。表單的屬性在中是有效的。屬性賦值不上上面的三種，會自動轉(zhuǎn)換為默認值。 知識點補充： MIME類型： 服務器需要將發(fā)送的多媒體數(shù)據(jù)的類型告訴瀏覽器，而告訴瀏覽器的手段就是告知多媒體的MIME類型。 form表單中的enctype屬性，可以告訴服務器...
摘要：文本框獲得焦點時，選中其中所有的文本思路利用焦點事件事件，在文本框獲得焦點時，利用其方法選中所有文本。自動切換焦點思路利用事件檢測用戶輸入新字符后，文本框內(nèi)的字符串是否已經(jīng)達到最大長度，若達到最大長度，則將焦點切換至下一個文本框。 JavaScript 表單腳本 通過 document.forms 可以獲得一個包含當前頁面中所有表單的集合 HTMLFormElement 接口 下面是這...
閱讀 2435·2021-10-11 10:57
閱讀 1287·2021-10-09 09:59
閱讀 2001·2019-08-30 15:53
閱讀 3218·2019-08-30 15:53
閱讀 1015·2019-08-30 15:45
閱讀 747·2019-08-30 15:44
閱讀 3455·2019-08-30 14:24
閱讀 956·2019-08-30 14:21
