FormData 接口提供了一种表示表单数据的键值对的构造方式，经过它的数据可以使用
XMLHttpRequest.send()方法送出，本接口和此方法都相当简单直接。如果送出时的编码类型被设为"multipart/form-data"，它会使用和表单一样的格式。
上面提到了Formdata提供一种表示表单数据得键值对的构造方式，什么意思?
通过Formdata你就不用手动拼接表单元素的值了如name:sdd&pwd:dsf... 或许你会疑惑我为什么要手动拼接表单值，直接提交不就行了吗？有些时候我们会通过ajax提交表单，通过ajax提交表单时我们不得不手动拼接表单值，数量少还好数量多很容易出错，写着也烦，此处笔者深有体会啊， 不仅如此Formdata支持文件上传，这就意味着你可以通过ajax实现异步文件这在web开发中太有用了，此博客后台上传文件就是通过Formdata
下面我们看看传统方式于Formdata的区别
传统XMLHttpRequest提交
代码语言：javascript复制window.onsubmit=function(){
submit.onclick=function(){
let xhr = new XMLHttpRequest();
xhr.onreadystatechange=function(){
if(xhr.readyState==4){
if(xhr.status==200){
console.log('请求成功')
}else{
console.log('请求失败')
}
}
}
xhr.open('get','text.js?' "name=" username.value "&" "age=" age.value "&" "phone=" phone.value "&" "email=" email.value "&" "address=" address.value "&" "comp=" comp.value)
xhr.send(null);
}
return false;
}可以看到拼接数据那一块实在太麻烦了，或许我们可以将它转换为json但工作量也少不到哪儿去
使用Formdata发送数据
代码语言：javascript复制 let oform = document.getElementById('oform')//获取form元素
window.onsubmit=function(){
let formdata = new FormData(oform)//通过表单构建FormData
let xhr = new XMLHttpRequest();
xhr.onreadystatechange=function(){
if(xhr.readyState==4){
if(xhr.status==200){
console.log('请求成功')
}else{
console.log('请求失败')
}
}
}
xhr.open(oform.method,oform.action );
xhr.send(formdata)
return false;
}看上去代码似乎都差不多，但这里我们没有手动拼接数据，而是直接使用了表单元素的数据。
jQuery中使用FormData
代码语言：javascript复制 $('#form1').on('submit', function (){
let formdata=new FormData(this);
$.ajax({
url: this.action,
type: this.method,
data: formdata,
processData: false,
contentType: false
}).then(res=>{
alert('成功');
}, res=>{
alert('失败');
});
return false;
});需要注意的是使用jq的ajax时必须设置process...和contentype...=false
FormData还有可用于文件上传，使用FormData执行文件上传我们不需要手动设置enctype=......它会自动帮我们处理
代码语言：javascript复制<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form id="form1" action="http://localhost:8080/" method="post">
用户：<input type="text" name="user" /><br>
密码：<input type="password" name="pass" /><br>
文件：<input type="file" name="f1" /><br>
<input type="submit" value="提交">
</form>
</body>
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<script>
$('#form1').on('submit', function (){
let formdata=new FormData(this);//这里的this转换成了普通的dom对象
$.ajax({
url: this.action,
type: this.method,
data: formdata,
processData: false,
contentType: false
}).then(res=>{
alert('成功');
}, res=>{
alert('失败');
});
return false;
});
</script>
</html>FormData常用方法
formdata.get(key):获取表单name=key的值
formdata.append("name","value") 表单元素添加一个name=name,value='value'的值 formdata.set("name","value")修改key为name的值，如果key不存在则添加
formdata.has("name") 判断是否有key为name的值 返回布尔值
formdata.delete("name")删除某个key值
