摘要：以下引用，摘自规范的章节这不就是我们在回调函数里判断返回数据的类型，并且是在请求头中的那个玩意儿吗没错就是它根据规范的基础数据类型的说明，这个指定了连接资源的属性，同时也是的那些媒体类型。今天掰扯完了表单提交时的编码类型，以及它和的关系。
很早以前，当还没有前端这个概念的时候，我在写表单提交完全不去理会表单数据的编码，在action属性里写好目标URL，剩下的啊交给浏览器吧~但是现在，更多时候我们都采用Ajax方式提交数据，这种原始的方式仅仅被当成优雅降级的产物。
当我们用异步方式提交表单，就需要稍微关注一下表单数据的编码问题了。回想一下，在写回调函数时是不是有根据过请求的Content-Type写不同业务逻辑的经历，那这个Content-Type和表单的编码有什么联系吗？有没有在明明前端已经发数据给后端了，后端的小伙伴死活取不到数据的情况？这些纠结的问题背后的原因真是困扰了我好久，今天在篇文章里就要把它们掰扯清楚！
是什么决定了表单的编码？熟悉表单元素的小伙伴，对其中的属性enctype一定不会陌生，就是它规定了对表单提交给服务器时表单数据编码的内容类型(Content Type)。以下引用，摘自HTML 4.01规范的Form章节：
enctype = content-type [CI]
This attribute specifies the content type used to submit the form to the server
content type？这不就是我们在回调函数里判断返回数据的类型，并且是在请求头中的那个玩意儿吗？！没错！就是它！根据HTML 4.01规范的基础数据类型的说明，这个content type指定了连接资源的属性，同时也是MIME type的那些媒体类型。
表单编码类型知道了表单编码由enctype决定的，那么它究竟有多少可选的取值呢？是不是所有的MIME类型它都能用呢？
实际上，根据HTML5 规范中所叙述的，enctype具有以下三种选项，其中最后一项text/plain是相比4.01新增的。
application/x-www-form-urlencoded
multipart/form-data
text/plain
application/x-www-form-urlencoded这是默认的编码类型，使用该类型时，会将表单数据中非字母数字的字符转换成转义字符，如"%HH"，然后组合成这种形式key1=value1&key2=value2；所以后端在取数据后，要进行解码。
注意：
若表单中有文件，则只留文件名；
multipart/form-data该类型用于高效传输文件、非ASCII数据和二进制数据，将表单数据逐项地分成不同的部分，用指定的分割符分割每一部分。每一部分都拥有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按照键值对排列表单数据key1=value1 key2=value2，不进行转义。
注意：
若表单中有文件，则只留文件名；
application/json及其他MIME类型另外，还需要说明表单数据编码类型application/json，已经被W3C遗弃（详见HTML JSON Form Submission），建议不要在中使用了，即使用了如果浏览器不支持，也会替换成application/x-www-form-urlencoded。
同理，其余的MIME类型，也不支持，均会替换成默认编码application/x-www-form-urlencoded。
PS：貌似现在浏览器都不支持了，我先用了下面几个浏览器：
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可以认为就是表单数据的content type(MIME type)，只不过其取值不能用除了上面提到的三个，否则会转换成默认的编码。
今天掰扯完了表单提交时的编码类型enctype，以及它和content type、MIME type的关系。下次再总结一下Ajax提交表单的类型吧。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/49810.html
摘要：格式支持比键值对复杂得多的结构化数据，这一点也很有用。例如下面这段代码最终发送的请求是这种方案，可以方便的提交复杂的结构化数据，特别适合的接口。 简介 form的enctype属性为编码方式，常用有两种：application/x-www-form-urlencoded和multipart/form-data，默认为application/x-www-form-urlencoded。 ...
摘要：表单中的属性，可以告诉服务器，我们提供给它的内容的类型。属性值表单中的属性常用值，有以下三种注意或元素中，若使用会覆盖属性。表单只支持和请求。表单的属性在中是有效的。属性赋值不上上面的三种，会自动转换为默认值。 知识点补充： MIME类型： 服务器需要将发送的多媒体数据的类型告诉浏览器，而告诉浏览器的手段就是告知多媒体的MIME类型。 form表单中的enctype属性，可以告诉服务器...
摘要：文本框获得焦点时，选中其中所有的文本思路利用焦点事件事件，在文本框获得焦点时，利用其方法选中所有文本。自动切换焦点思路利用事件检测用户输入新字符后，文本框内的字符串是否已经达到最大长度，若达到最大长度，则将焦点切换至下一个文本框。 JavaScript 表单脚本 通过 document.forms 可以获得一个包含当前页面中所有表单的集合 HTMLFormElement 接口 下面是这...
阅读 2232·2021-10-11 10:57
阅读 1106·2021-10-09 09:59
阅读 1877·2019-08-30 15:53
阅读 3097·2019-08-30 15:53
阅读 867·2019-08-30 15:45
阅读 606·2019-08-30 15:44
阅读 3343·2019-08-30 14:24
阅读 831·2019-08-30 14:21
