FormData对象

一、概念

---

 

FormData对象，能够把全部表单元素的name与value组成一个queryString,提交到后台。

使用ajax时，使用FormData对象能够减小queryString的工做量（queryString是查询字符串，http查询字符串由url中？后面的值指定）。

二、使用

---

　　1）、建立对象

　　　　

var formData = new FormData();

　　2) 、使用实例化对象

 　　假若有下面的form表单

1 <form id="myForm" action="" method="post">
2     <input type="text" name="name">名字
3     <input type="password" name="psw">密码
4     <input type="submit" value="提交">
5 </form>

 三、 操做方法

---

 

　　　　一、获取数据：get(key)  或者  getAll(key)来获取对应的数据值

formData.get("name"); // 获取key为name的第一个值
formData.get("name"); // 返回一个数组，获取key为name的全部值

　　　

　　　　2、添加数据： append(key, value)添加数据，若是key值不存在会增长一条值，若是存在则添加到数据的末尾

1 formData.append("k1", "v1");
2 formData.append("k1", "v2");
3 formData.append("k1", "v1");
4  
5 formData.get("k1"); // "v1"
6 formData.getAll("k1"); // ["v1","v2","v1"]

　　　三、设置修改数据：set(key , value)来设置修改数据，若是指定的key不存在则会新增一条，若是存在，则会修改对应的value值。

1 formData.append("k1", "v1");
2 formData.set("k1", "1");
3 formData.getAll("k1"); // ["1"]

　　　4、删除数据：经过delete(key)，来删除数据

　　

formData.append("k1", "v1");
formData.append("k1", "v2");
formData.append("k1", "v1");
formData.delete("k1");
 
formData.getAll("k1"); // []

　　　　五、遍历数据 ：能够经过entries()来获取一个迭代器，而后遍历全部的数据，

　　　　　　迭代器的规则：

　　　　　　　　　　　　一、每调用一次next()返回一条数据，数据的顺序由添加的顺序决定

　　　　　　　　　　　　二、返回的是一个对象，当其done属性为true时，说明已经遍历完全部的数据，这个也能够做为判断的依据

　　　　　　　　　　　　三、返回的对象的value属性以数组形式存储了一对key/value，数组下标0为key，下标1为value，若是一个key值对应多个value，会变成多对key/value返回

 

 1 formData.append("k1", "v1");
 2 formData.append("k1", "v2");
 3 formData.append("k2", "v1");
 4  
 5 var i = formData.entries();
 6  
 7 i.next(); // {done:false, value:["k1", "v1"]}
 8 i.next(); // {done:fase, value:["k1", "v2"]}
 9 i.next(); // {done:fase, value:["k2", "v1"]}
10 i.next(); // {done:true, value:undefined}