form-data、x-www-form-urlencoded、raw、binary的区别

x-www-form-urlencoded

 

当用户通过form表单提交数据的时候，例如：

 

<form method="post"action="http://api.test.com/user" >

    <inputtype="text" name="name">

    <inputtype="text" name="age">

</form>

 

提交时会向服务器端发出这样的数据（已经去除部分不相关的头信息），数据如下：

 

POST /user HTTP/1.1

Content-Type:application/x-www-form-urlencoded

Accept-Encoding: gzip, deflate

Host: api.test.com

Content-Length: 21

Connection: Keep-Alive

Cache-Control: no-cache

name=互扯程序&age=18

 

它的Content-Type是application/x-www-form-urlencoded，这表示消息内容会经过URL编码

 

form-data

 

当需要上传文件（可以上传多个文件），并且有参数同时传递的时候，选择这个选项可以上传文件。

举个例子

 

<form method="post"action="http://api.test.com/user/upload.do" enctype=”multipart/form-data”>

    <inputtype="text" name="desc">

    <inputtype="file" name="pic">

</form>

 

浏览器将会发送以下数据：

 

POST /user/upload.do HTTP/1.1

Accept-Language: zh-cn,zh;q=0.5

Accept-Charset: GBK,utf-8;q=0.7,*;q=0.7

Connection: keep-alive

Content-Length: 60408

Content-Type:multipart/form-data; boundary=ZnGpDtePMx0KrHh_G0X99Yef9r8JZsRJSXC

Host: api.test.com

 

我们看到Content-Type:multipart/form-data;

 

当需要上传数据的时候，必须设置enctype=“multipart/form-data”，

 

enctype：规定在发送到服务器之前应该如何对表单数据进行编码，他有如下的三个值：

 

1. application/x-www-form-urlencoded。默认的编码方式。所有字符都会进行编码（空格转换为 "+" 加号，特殊符号转换为 ASCII HEX 值）。

2. multipart/form-data 。 指定传输数据为二进制类型，比如图片、mp3、文件。 不对字符编码。在使用包含文件上传控件的表单时，必须使用该值。

3. text/plain。纯文体的传输。空格转换为 “+” 加号，但不对特殊字符编码。

 

其实form表单在你不写enctype属性时，也默认为其添加了enctype属性值，默认值是enctype="application/x- www-form-urlencoded"，所以上面注册用户的时候虽然没写，其实默认加上了。

 

raw

 

当需要给服务端传递json，xml等数据的时候选择raw，当选择了raw的时候，header里会自动加上

Content-Type: application/json

 

例如：

 

$.ajax({

‍    url:"/user/",

    data:JSON.stringify(user),

    method:"POST",

    contentType:"application/json",

    success: function(res){

        console.info("添加成功")

    }‍

});

 

 

 

 

 

binary

 

只能上传一个文件，也不能添加参数。