AjaxJS之表单提交时编码类型enctype详解

multipart/form-data

那又是几个普及的 POST
数据交由的点子。大家选拔表单上传文件时,必须让 <form> 表单的
enctype 等于 multipart/form-data。直接来看一个呼吁示例:

Request Headers:

Accept:application/json, text/plain, */*
Accept-Encoding:gzip, deflate
Accept-Language:zh-CN,zh;q=0.8
Connection:keep-alive
Content-Length:13125
Content-Type:multipart/form-data; boundary=----WebKitFormBoundaryaqWXpQYCfMbAHgPh
Cookie:shiro.sesssion=1a6d4f4d-ab5f-4a1b-a5cd-fc71cf9633cb
Host:192.168.199.223
Origin:http://192.168.199.223
Referer:http://192.168.199.223/
User-Agent:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.106 Safari/537.36

Request Payload:

------WebKitFormBoundaryaqWXpQYCfMbAHgPh
Content-Disposition: form-data; name="fileEnterprise"; filename="a.jpg"
Content-Type: image/jpeg


------WebKitFormBoundaryaqWXpQYCfMbAHgPh
Content-Disposition: form-data; name="enterpriseName"

有限责任公司
------WebKitFormBoundaryaqWXpQYCfMbAHgPh
Content-Disposition: form-data; name="unifiedSocialCreditCode"

91530700781667237G
------WebKitFormBoundaryaqWXpQYCfMbAHgPh--

注意:

  • 貌似的话,methodenctype是多少个例外的互不影响的质量,但在传文书时,method务须要内定为POST,不然文件只剩余filename了;

  • 当没有传文书时,enctype会改回暗中同意的application/x-www-form-urlencoded

以此例子稍微复杂点。首文人成了一个boundary 用于私分分歧的字段,为了幸免与本文内容重复,boundary
相当长很复杂。然后 Content-Type 里指明了数额是以 multipart/form-data
来编码,这一次请求的 boundary
是何许内容。音讯主体里遵照字段个数又分为多个结构类似的一对,每部分都是以
--boundary
开始,紧接着是内容叙述消息,然后是回车,最终是字段具体内容(文本或二进制)。如若传输的是文本,还要包罗文件名和文件类型音信。音信主体最终以
--boundary-- 标示停止。关于 multipart/form-data 的详尽定义,请前往
rfc1867 查看。

那种格局相似用来上传文件,各大服务端语言对它也负有得天独厚的协理。

下面提到的那三种 POST
数据的法门,都以浏览器原生支持的,而且最近专门的学业中原生 <form>
表单也只扶助那二种办法(通过
<form> 元素的 enctype 属性钦点,默以为
application/x-www-form-urlencoded。其实 enctype 还支持
text/plain,然则用得十分少)。

乘势越来越多的 Web
站点,特别是 WebApp,全体应用 Ajax
举办多少交互之后,大家一起可以定义新的数据交由方式,给开采带来越多方便。

application/x-www-form-urlencoded

这是私下认可的编码类型,使用该品种时,会将表单数据中非字母数字的字符调换到转义字符,如”%HH”,然后组合成那种格局key1=value1&key2=value2就此后端在取多少后,要拓展解码。请求类似于下边那样(非亲非故的请求头在本文中都省略掉了):

POST http://www.example.com HTTP/1.1
Content-Type: application/x-www-form-urlencoded;charset=utf-8

title=test&sub%5B%5D=1&sub%5B%5D=2&sub%5B%5D=3

首先,Content-Type 被钦点为
application/x-www-form-urlencoded;其次,提交的数目按照key1=val一&key二=val2 的方式展开编码,key 和 val 都进行了 U揽胜极光L
转码。超越2/四服务端语言都对那种措施有很好的支撑。举例 PHP 中,$_POST[‘title’]
可以赢获得 title 的值,$_POST[‘sub’] 能够拿走 sub
数组。

成都百货上千时候,我们用 Ajax
提交数据时,也是使用那种措施。比如 JQuery
QWrap 的 Ajax,Content-Type
暗中同意值都以「application/x-www-form-urlencoded;charset=utf-8」。

style=”font-family: Microsoft YaHei;”>注意:若表单中有文件,则只留文件名。

text/plain

根据键值对排列表单数据key1=value1\r\nkey2=value2,不进行转义。

style=”font-family: Microsoft YaHei;”>注意:若表单中有文件,则只留文件名。

表单编码类型

清楚了表单编码由enctype支配的,那么它到底有微微可选的取值呢?是或不是颇具的MIME类型它都能用呢?
实际上,根据HTML5
规范
中所叙述的,enctype全数以下三种选拔,当中最终壹项text/plain是相比4.01新增的。

  • application/x-www-form-urlencoded
  • multipart/form-data
  • text/plain

application/json及其他MIME类型

application/json 那几个Content-Type
作为响应头我们断定不面生。实际上,今后更为多的人把它当做请求头,用来告诉服务端信息主体是连串化后的
JSON 字符串。由于 JSON 规范的盛行,除了低版本 IE
之外的各大浏览器都原生帮忙 JSON.stringify,服务端语言也都有管理 JSON
的函数,使用 JSON 不会遇上什么样麻烦。

JSON
格式协理比键值对复杂得多的结构化数据,那点也很有用。记得笔者几年前做3个项目时,须要提交的数目档案的次序异常深,小编正是把数据
JSON 类别化之后来交付的。可是当下自己是把 JSON 字符串作为
val,照旧位居键值对里,以 x-www-form-urlencoded 格局交给。

Google 的
AngularJS 中的 Ajax 效率,暗中认可正是交给 JSON
字符串。比如上面那段代码:

var data = {'title':'test', 'sub' : [1,2,3]};
$http.post(url, data).success(function(result) {
    ...
});

末尾发送的乞请是:

POST http://www.example.com HTTP/1.1 
Content-Type: application/json;charset=utf-8

{"title":"test","sub":[1,2,3]}

那种方案,能够一本万利的付出复杂的结构化数据,尤其适合
RESTful 的接口。各大抓包工具如 Chrome
自带的开垦者工具、Firebug、Fiddler,都会以树形结构呈现 JSON
数据,卓殊温馨。但也有个别服务端语言还未有辅助那种措施,举例 php
就不或然透过 $_POST
对象从地点的呼吁中获得内容。那时候,需求团结动手管理下:在请求头中
Content-Type 为 application/json 时,从 php://input
里获得原始输入流,再 json_decode 成对象。一些 php
框架已经起来这么做了。

理所当然 AngularJS
也能够配备为使用 x-www-form-urlencoded
格局交给数据。如有须要,能够参照那篇小说

 

除此以外,还亟需证实表单数据编码类型application/json,已经被W3C遗弃(详见HTML
JSON Form
Submission
),建议不要在<form enctype="...">中动用了,即采纳了一旦浏览器不帮助,也会替换到application/x-www-form-urlencoded
同理,其他的MIME类型,也不帮衬,均会交替成暗中认可编码application/x-www-form-urlencoded

注:1.MIME (Multipurpose
Internet Mail Extensions)
是讲述音信内容类型的因特网规范。

贰.MIME
新闻能包涵文本、图像、音频、录像以及其余应用程序专用的数额。

想要了然详细的Mime
类型列表,请参见《W叁school:MIME
参考手册》

简介

form的enctype属性为编码情势,常用有二种:application/x-www-form-urlencoded和multipart/form-data,默以为application/x-www-form-urlencoded。

当action为get时候,浏览器用x-www-form-urlencoded的编码情势把form数据调换到四个字串(name一=value一&name2=value贰…),然后把那几个字串append到url前面,用?分割,加载这么些新的url。

当action为post时候,浏览器把form数据封装到http
body中,然后发送到server。借使未有type=file的控件,用暗中认可的application/x-www-form-urlencoded就足以了。
不过1旦有type=file的话,将要采用multipart/form-data了。浏览器会把全体表单以控件为单位划分,并为各样部分加上Content-Disposition(form-data可能file),Content-Type(默以为text/plain),name(控件name)等音讯,并加上分割符(boundary)。

Ajax,依照查找的资料取得如下总计:

  • application/x-www-form-urlencoded:
    窗体数据被编码为名称/值对
    。那是专门的工作的编码格式。
  • multipart/form-data:
    窗体数据被编码为一条音信,页上的各种控件对应新闻中的几个有的
  • text/plain:
    窗体数据以纯文本格局举办编码,当中不含任何控件或格式字符。

HTTP/1.1
协议
鲜明的 HTTP 请求方法有
OPTIONS、GET、HEAD、POST、PUT、DELETE、TRACE、CONNECT 那三种。当中 POST
一般用来向服务端提交数据,本文首要研商 POST 提交数据的二种情势。

咱俩知晓,HTTP 协议是以
ASCII 码传输,建立在 TCP/IP 协议之上的应用层规范。规范把 HTTP
请求分为多个部分:状态行、请求头、音讯主体。类似于上面这样:

<method> <request-URL> <version>
<headers>

<entity-body>

说道规定 POST
提交的数目必须放在音讯主体(entity-body)中,但情商并未规定数量必须运用什么编码方式。实际上,开荒者完全能够协调说了算新闻主体的格式,只要最终发送的
HTTP 请求知足下边包车型大巴格式就能够。

唯独,数据发送出去,还要服务端解析成功才有意义。一般服务端语言如
php、python 等,以及它们的
framework,都放到了机动分析常见数据格式的效益。服务端平常是基于请求头(headers)中的
Content-Type
字段来获知请求中的音信主体是用何种措施编码,再对主体张开解析。所以提起POST 提交数据方案,包涵了 Content-Type 和消息主体编码方式两有些。

总结

所以,enctype可以认为正是表单数据的content type(MIME type),只可是其取值无法用除了上边提到的七个,否则会转变到暗许的编码。

可参考地址:《各个常见的 POST
提交数据格局》

是哪些决定了表单的编码?

熟知表单成分<form>的小伙伴,对在那之中的性质enctype早晚不会目生,便是它规定了对表单提交给服务器时表单数据编码的内容类型(Content
Type)。

相关文章