基础功能

常见的接口类型

查询参数的接口 application/x-www-form-urlencoded
表单类型的接口 multipart/form-data
json类型的接口multipart/json
上传文件的接口 multipart/form-data

注意：x-www-form-urlencoded与form-data的区别

在Form元素的语法中，EncType表明提交数据的格式用 Enctype 属性指定将数据回发到服务器时浏览器使用的编码类型。

application/x-www-form-urlencoded：窗体数据被编码为名称/值对。这是标准的编码格式。 (当action为get时候，浏览器用x-www-form-urlencoded的编码方式把form数据转换成一个字串（name1=value1&name2=value2...），然后把这个字串append到url后面，用?分割，加载这个新的url。当action为post时候，浏览器把form数据封装到http body中，然后发送到server。)

multipart/form-data：窗体数据被编码为一条消息，页上的每个控件对应消息中的一个部分。 text/plain：窗体数据以纯文本形式进行编码，其中不含任何控件或格式字符。(*浏览器会把整个表单以控件为单位分割，并为每个部分加上Content-Disposition(form-data或者file),Content-Type(默认为text/plain),name(控件name)等信息，并加上分割符(boundary))

FormData使用

使用一

var formdata = new FormData();
formdata.append(``"name"``, ``"呵呵"``);

使用二

var formobj =  document.getElementById(``"form"``);
var formdata = new FormData(formobj);

使用三

var formobj =  document.getElementById(``"form"``);
var formdata = formobj.getFormData()

ajax使用FormData

一、使用form表单初始化

$.ajax({
    url: '/upload',
    type: 'POST',
    cache: false,
    data: new FormData($('#uploadForm')[0]),
    processData: false,
    contentType: false
}).done(function(res) {
}).fail(function(res) {});

注意：

processData设置为false。因为data值是FormData对象，不需要对数据做处理。
<form>标签添加enctype="multipart/form-data"属性。
cache设置为false，上传文件不需要缓存。
contentType设置为false，不设置contentType值，因为是由<form>表单构造的FormData对象，且已经声明了属性enctype="multipart/form-data"，所以这里设置为false。

二、使用添加的方式

var formData = new FormData();
formData.append('file', $('#file')[0].files[0]);
$.ajax({
    url: '/upload',
    type: 'POST',
    cache: false,
    data: formData,
    processData: false,
    contentType: false
}).done(function(res) {
}).fail(function(res) {});

注意：

append()的第二个参数应是文件对象，即$('#file')[0].files[0]。
contentType也要设置为‘false’。从代码$('#file')[0].files[0]中可以看到一个<input type="file">标签能够上传多个文件，
只需要在<input type="file">里添加multiple或multiple="multiple"属性。