什么是FormData？

formData是ajax2.0(XMLHttpRequest Level2)新提出的接口,利用FormData对象可以将form表单元素的name与value进行组合,实现表单数据的序列化,从而介绍表单元素的拼接,提高工作效率

刚开始看到这样说，还是有点懵，不知道该怎么使用

那就来看一个小例子

<form action="/postForm" id="form">
 <input type="text" id="username" name="username">
 <input type="password" id="password" name="password">
 <input type="button" value="submit" onclick="mysubmit()">
</form>

现在有一个需求，就是拿到Form表单中的用户名和密码并包装成对象，通过接口传递给后端

平常写法

一般的写法就是拿到这些值，然后再手动的处理成对象，这种处理起来会增加代码

function mysubmit(){
 let usernameEle=document.getElementById("username");
 let username=usernameEle.value;
 let passwordEle=document.getElementById("password");
 let password=passwordEle.value;
 let user={
     username:username,
     password:password
 };
 console.log(user);
}

FormData的JS写法：

function mysubmit(){
     let form=document.getElementById("form");
     let formData=new FormData(form); //将form表单中的信息包装成键值对的形式，返回一个对象
     formData.append('key1', value1)
     formData.set("username","lucy") //将username对应的键值改为lucy
     formData.has("username") //true,表示表单含有username键对应的值
     console.log(formData.get("key1"));
     console.log(formData.get("username"));//通过get方法获取键对应的值
     console.log(formData.get("password"));
 }

只需要 new FormData(form) 一句代码就可以把form表单内的所有信息都以键值对的形式包装成一个对象返回

FormData 的主要方法

• has => 返回一个布尔值表明 FormData 对象是否包含某些键
• get => 返回在 FormData 对象中与给定键关联的第一个值
• getAll => 返回一个包含 FormData 对象中与给定键关联的所有值的数组
• append => 向FormData 中添加新的属性值，如果FormData 对应的属性值存在则覆盖原值，否则新增一项属性值。
• set => 与 append() 的区别是，如果指定的键已经存在，set() 会使用新值覆盖已有的值，而 append() 会把新值添加到已有值集合的后面。
• delete => 从FormData对象里面删除一个键值对
• keys => 返回一个包含所有键的iterator对象
• values => 返回一个包含所有值的iterator对象。
• forEach => 遍历FormData 对象
• entries => 返回一个包含所有键值对的iterator对象

FormData 存储数据方式

一对key / value 组成一条数据，key 是唯一的，一个 key 可以对应多个value，如果是使用表单初始化，那每一个表单字段对应一条数据，它们的HTML name 属性即为 key 值，它们的value属性即为对应的value值。