最近在学习红宝书第四版24章节 的 xhr部分，提到了XMLHttpRequest Level 2的 FormData 类型。以前只是有个印象，现在来仔细的了解一下：
现代 Web 应用程序中经常需要对表单数据进行序列化，因此 XMLHttpRequest Level 2 新增了
FormData 类型。
FormData 类型便于表单序列化，也便于创建与表单类似格式的数据然后通过 XHR
发送。下面的代码创建了一个 FormData 对象，并填充了一些数据：
let data = new FormData();
data.append("name", "Nicholas");append() 方法接收两个参数：键和值，相当于表单字段名称和该字段的值。可以像这样添加任意
多个键/值对数据。
此外，通过直接给 FormData 构造函数传入一个表单元素，也可以将表单中的数据作为键/值对填充进去：
let data = new FormData(document.forms[0]);有了 FormData 实例，可以像下面这样直接传给 XHR 对象的 send() 方法：
let xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
alert(xhr.responseText);
} else {
alert("Request was unsuccessful: " + xhr.status);
}
}
};
xhr.open("post", "postexample.php", true);
let form = document.getElementById("user-info");
xhr.send(new FormData(form));在运行上面这段代码的时候一直执着的想看看new FormData(form)这个输出的结果，结果输出空，
如下图：
然后群里问了大佬们，大佬们给出的回答，需要用get获取
下面可以输出值了，根据属性获取相应的值
<form action="" id = "user-info"><input type="text" id = "username" name = "username" placeholder="username"><input type="text" id = "password" name = "password" placeholder="password"><button type = "button" id = "submitBtn">click</button></form>$("#submitBtn").click(function(){let form = document.getElementById("user-info");console.log(new FormData(form).get("username"));var data = new FormData(form);console.log(data.get("username"));console.log(data.get("password"))})
使用 FormData 的另一个方便之处是不再需要给 XHR 对象显式设置任何请求头部了。XHR 对象能
够识别作为 FormData 实例传入的数据类型并自动配置相应的头部。
好了，记录完毕。