formData处理表单

一、FormData 对象和方法

FormData()构造函数的参数是一个 DOM 的表单元素，构造函数会自动处理表单的键值对。这个参数是可选的，如果省略该参数，就表示一个空的表单。

//生成表单实例：
var form = document.getElementById("myForm");
var formData = new FormData(form);

表单实例的方法：

方法名	描述
get(key)	获取指定键名对应的键值，参数为键名。如果有多个同名的键值对，则返回第一个键值对的键值。
getAll(key)	返回一个数组，表示指定键名对应的所有键值。如果有多个同名的键值对，数组会包含所有的键值。
set(key, value)	设置指定键名的键值，参数为键名。如果键名不存在，会添加这个键值对，否则会更新指定键名的键值。如果第二个参数是文件，还可以使用第三个参数，表示文件名。
delete(key)	删除一个键值对，参数为键名。
append(key, value)	添加一个键值对。如果键名重复，则会生成两个相同键名的键值对。如果第二个参数是文件，还可以使用第三个参数，表示文件名。
has(key)	返回一个布尔值，表示是否具有该键名的键值对。
keys()	返回一个遍历器对象，用于for...of循环遍历所有的键名。
values()	返回一个遍历器对象，用于for...of循环遍历所有的键值。
entries()	返回一个遍历器对象，用于for…of循环遍历所有的键值对。如果直接用for…of循环遍历 FormData 实例，默认就会调用这个方法。

for (var pair of formData.entries()) {
  console.log(pair[0] + ': ' + pair[1]);
}
// 等同于遍历 formData.entries()
for (var pair of formData) {
  console.log(pair[0] + ': ' + pair[1]);
}

二、遇到的问题

[1]. set方法覆盖多个相同键名的值

当表单中有多个name为username的表单控件时

//html
// 姓名：<input type="text" name="username" id="username">
// 姓名2：<input type="text" name="username" id="username2">
data.getAll("username");//["as", "sa"]

data.set('username', 'ttt');

data.getAll("username");//["ttt"]