FormData对象的介绍与使用方法

一. FormData对象介绍

FormData对象其实是在XMLHttpRequest 2级定义的，定义它的目的就是为序列化表单以及创建与表单格式相同的数据（当然是用于XHR传输）提供便利。

二. 创建FormData的实例对象

1. 使用构造函数创建一个空的实例对象

使用构造函数创建对象实例已经是老生常谈了，大家肯定不陌生了，格式如下：

var formData = new FormData();

此时可以调用append()方法来添加数据

2. 使用已有的表单来初始化一个实例对象

<form id="myForm" action="" method="post">
    <input type="text" name="name">名字
    <input type="password" name="pwd">密码
    <input type="submit" value="提交">
</form>

我们可以使用这个表单标签作为初始化参数，来初始化一个FormData实例对象：

//	获取页面中的一个form表单
var form = document.getElementById('myForm');
//	根据获取到的表单初始化一个 FormData 实例对象
var formData = new FormData(form);
//	根据 form 标签内的 input 标签的 name 属性来获取值
//	获取 name 属性值为 “name” 的 input 框的value值
var name = formData.get('name');
//	获取 name 属性值为 “pwd” 的 input 框的value值
var pwd = formData.get('pwd');
//	也可以在这个基础上添加一些数据
formData.append('age', 25);

三. 使用方法

首先，我们要明确 formData 里面存储的数据形式，一对 key/value 组成一条数据， key是唯一的 ，一个key可能对应多个value；
如果是使用表单初始化，每一个表单字段对应一条数据，form标签内的每个标签的 name属性 即为key值，它们value属性对应value值。

1. 获取值

可以通过 get(key)/getAll(key) 来获取对应的value值：

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

2. 添加数据

可以通过 append(key, value) 来添加数据，如果指定的key不存在则会新增一条数据，如果key存在，新增的数据则会添加到数据的末尾：

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

3. 设置修改数据

可以通过 set(key, value) 来设置修改数据，如果指定的key不存在则会新增一条，如果存在，则会修改对应的value值：

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

4. 判断是否存在该数据

可以通过 has(key) 来判断是否对应的key值：

formData.append("k1", "v1");
formData.append("k2",null);
 
formData.has("k1"); // true
formData.has("k2"); // true
formData.has("k3"); // false

5. 删除数据

通过 delete(key) ，来删除数据：

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