常用的Form表单的编码类型

常用的Form表单的编码类型：

• application/x-www-form-urlencoded 普通的form表单提交
• application/json" 用于 复杂JSON数据的提交
• multipart/form-data 用于 文件上传

一、x-www-form-urlencoded（默认）

application/x-www-form-urlencoded 普通的form表单提交

浏览器会将表单数据转换 k1=v1&k2=v2&k3=v3...这种格式的字符串。

get 提交
浏览器把form数据转换成一个字符串 k1=v1&k2=v2&k3=v3...，然后把这个字串append到url后面，用?分割，加载这个新的url，并发给Server。

post 提交
浏览器把form数据转换成一个字符串 k1=v1&k2=v2&k3=v3... ，封装到请求体（http body）中，然后发送到server。

我们用 jQuery的 ajax() post 提交数据时，Content-Type默认值都是application/x-www-form-urlencoded;charset=utf-8。
当向后端服务提交数据时，浏览器默认会将提交的数据转成 k1=v1&k2=v2&k3=v3...这种格式。

一个完整的 ajax() post提交 ，如图：

二、multipart/form-data （上传文件）

上传文件时，必须使用 multipart/form-data ；
必须用post提交；
使用时，需要将form 的 enctype属性设置为 multipart/form-data。

看一个请求示例：

POST http://www.example.com HTTP/1.1 
Content-Type:multipart/form-data; boundary=----WebKitFormBoundaryrGKCBY7qhFd3TrwA 

------WebKitFormBoundaryrGKCBY7qhFd3TrwA 
Content-Disposition: form-data; name="text" 

title 
------WebKitFormBoundaryrGKCBY7qhFd3TrwA 
Content-Disposition: form-data; name="file"; filename="chrome.png" 
Content-Type: image/png 

PNG ... content of chrome.png ... 
------WebKitFormBoundaryrGKCBY7qhFd3TrwA-- 

首先生成了一个 boundary 用于分割不同的字段，为了避免与正文内容重复，boundary 很长很复杂。

然后 Content-Type 里指明了数据是以 mutipart/form-data 来编码，本次请求的 boundary是什么内容。

消息主体 里按照字段个数又分为多个结构类似的部分，每部分都是以 --boundary 开始，紧接着内容描述信息 ，然后是回车，最后是字段具体内容（文本或二进制）。
如果传输的是文件，还要包含文件名和文件类型信息。

消息主体最后以 --boundary-- 标示结束。

上面提到的这两种 POST 数据的方式，都是浏览器原生支持的，而且现阶段原生 form 表单也只支持这两种方式。

三、application/json（当前及未来的主流）

现在越来越多的人把 Content-Type 设置为application/json 作为响应头。
除了低版本IE之外，各大浏览器都原生支持 JSON.stringify，服务端语言也都有处理 JSON 的函数。

JSON 格式支持 键值对复杂得多的结构化数据。

AngularJS 默认就是application/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 的接口。

一个完整的AngularJS 请求 ，Content-Type 是 appliction/json
如下：