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}