常用的 form表单的 enctype 编码方式（类型）

1、引言

<form action="http://www.test.com/user/save" enctype="取值" >

 name: <input type="text" name="name" /><br>
 age: <input type="text" name="age" /><br>
  
  <input type="submit" value="提交" />  
</form>

在写表单数据提交时，form 的属性 enctype 常常被忽略，enctype 是做什么？

enctype 属性规定在发送到服务器之前应该如何对表单数据进行编码。

默认地，表单数据会编码为 application/x-www-form-urlencoded。就是说，在发送到服务器之前，所有字符都会进行编码（空格转换为 “+” 加号，特殊符号转换为 ASCII HEX 值）。

2、enctype 属性的取值：

值	描述
application/x-www-form-urlencoded	在发送前，编码所有字符。此项是默认值 。
multipart/form-data	不对字符编码。 在使用 包含 文件上传控件 的表单时，必须使用该值。
text/plain 、application/json 、application/xml 等	空格转换为 “+” 加号，但不对特殊字符编码。

2.1、x-www-form-urlencoded 默认普通的 form 表单提交广式

application/x-www-form-urlencoded 默认 是普通的 form 表单提交 类型

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

1）get 提交

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

2）post 提交

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

3）jQuery的 ajax()、post() 中的使用

jQuery的 ajax()、post() 方法进行 post 提交数据时，Content-Type默认值都是application/x-www-form-urlencoded;charset=utf-8。如下面代码所示：

 $.ajax({
        type: "post",
        url: '/Resources/GetList.ashx',
        success: function (data) {
            console.log(data);
        }
    });

当向后端服务提交数据时，浏览器默认会将提交的数据转成 k1=v1&k2=v2&k3=v3...这种格式。

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

2.2、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 表单也只支持这两种方式。

2.3、application/json 复杂JSON数据的提交

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

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

1） jQuery的 ajax()、post() 中的使有

我们用 jQuery的 ajax()、post() 方法进行 post 提交数据时，Content-Type 默认值都是application/x-www-form-urlencoded;charset=utf-8。如果想使用 application/json ，可以能过 contentType 指定 编码类型为 application/json 。如下面示例代码：

$.ajax({
    method: "post",
    url: "/Resources/GetList.ashx", 
    contentType: 'application/json', // 提交编码类型为 application/json    
    success: function( data ) {
    	console.log(data) ;
    }
});

2）AngularJS 中的编码方式（类型）

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
如下：