FormData 类型

最近在学习红宝书第四版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 实例传入的数据类型并自动配置相应的头部。

好了，记录完毕。