js FormData方法介绍

1.FormData对象有什么用？

我们先看一个小例子：

html代码：

<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表单中的用户名和密码并包装成一个对象

这个需求是我们大部分时候在发送ajax请求时需要做的一个工作。

传统JS写法：

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);
}

看一下效果：

可以看到，我们已经实现了需求，但是我们写的JS代码很繁琐，我们需要先获取form表单中input框元素，然后元素的value值，最后包装成一个对象。

FormData的JS写法：

function mysubmit(){
 let form=document.getElementById("form");
 let formData=new FormData(form); //将form表单中的信息包装成键值对的形式，返回一个对象
 console.log(formData.get("username"));//通过get方法获取键对应的值
 console.log(formData.get("password"));
 }

效果如下：

通过这个例子你应该能感受到FormData的便利性，只需要 new FormData(form) 一句代码就可以把form表单内的所有信息都以键值对的形式包装成一个对象返回。

2.FormData用法介绍

FormData对象是用来将form表单数据编译成键值对，这么做有两个好处：

直接将表单元素的name和value进行组合，减少个人的信息拼接工作
异步上传文件
FormData的常用操作方法：

get(key)和getAll(key)获取键对应的值

// 获取key为username的第一个值
formData.get("username"); 
 // 获取key为username的所有值，返回值为数组类型
formData.getAll("username");
append(key,value)追加数据
formData.append("age",18);//增加一个age数据

set(key,value)修改数据值

formData.set("username","lucy") //将username对应的键值改为lucy

has(key)检查是否有该key对应的值

formData.has("username") //true,表示表单含有username键对应的值

delete(key)删除该key对应的值

formData.delete("username") 
//将username键对应的值删除