formData的使用

　　这两天公司大佬让我重写一个内部使用软件的页面，我蹭蹭蹭的就给他把静态页面写完了，之后就是请求，可把我难死了，其中遇到两个大问题，一个是跨域请求，还没解决，谁来帮帮我啊？？另一个是表单提交，用formData，现记录如下。

一、认识formData

　　XMLHttpRequest Level 2添加了一个新的接口FormData.利用FormData对象,我们可以通过JavaScript用一些键值对来模拟一系列表单控件,我们还可以使用XMLHttpRequest的send()方法来异步的提交这个”表单”.比起普通的ajax,使用FormData的最大优点就是我们可以异步上传一个二进制文件.

二、创建一个formData

　1.创建一个空对象实例

var formdata = new FormData();

　2．通过form表单实例化一个formData对象，form表单

　html

<form action = '' method = '' enctype = 'multipart/form-data'>    <input type = 'text' name = ''></form>

　js

var form = document.queryselector('form');var formdata = new FormData(form);

三、常用方法

1、append() 在原有的formdata对象上添加数据,如果键不存在则会添加该键。

formdata.append(key,value); 

2、set() 在原有的formData对象中添加数据，如果已存在，则替换，不存在，则添加

formdata.set(key,value); 

3、delete() 从引用的formData对象上删除

formdata.delete(key);

4、get()和getAll() 通过键得到值

var formData = new FormData();formData.append('username', 'aa');formData.append('username', 'bb');formData.get('username'); // return "bb"formData.getAll('username');// return ['aa','bb']

5、has() 判断这个formData对象中是否包含该 数据

var formData = new FormData();formData.append('username', 'aa');formData.has('username'); //return trueformData.has('password'); //return false

6、entries() 返回一个iterator对象

var formData = new FormData();formData.append('key1', 'value1');formData.append('key2', 'value2');// Display the key/value pairsfor(var pair of formData.entries()) {   console.log(pair[0]+ ', '+ pair[1]); }

7、keys() 返回一个iterator对象，输出所有的key

var formData = new FormData();formData.append('key1', 'value1');formData.append('key2', 'value2');// 输出所有的 keyfor (var key of formData.keys()) {   console.log(key); }

8、values() 返回一个iterator，显示所有的值

//创建一个FormData测试对象var formData = new FormData();formData.append('key1', 'value1');formData.append('key2', 'value2');//显示值for (var value of formData.values()) {   console.log(value); }

四、使用ajax（）上传formData数据

$.ajax({    type:'post',    url:'....',    // cache: false,    processData: false,     // 是否序列化data属性，默认true(注意：false时type必须是post)    contentType: false,     // 当有文件要上传时，此项是必须的，否则后台无法识别文件流的起始位置    data:formData,   //formData类型的数据    success:function(){    },    error:function(){    }});

参考自：MDN