**FormData
**接口提供了一种表示表单数据的键值对 key/value
的构造方式,并且可以轻松的将数据通过[XMLHttpRequest.send()](<https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/send>)
方法发送出去,本接口和此方法都相当简单直接。如果送出时的编码类型被设为 "multipart/form-data"
,它会使用和表单一样的格式。
构造函数用于创建一个新的FormData对象
// 通过FormData构造函数创建一个空对象
let formdata = new FormData();
通过表单对formData进行初始化
<form id="advForm">
<p>广告名称:<input type="text" name="advName" value="xixi"></p>
<p>广告类别:<select name="advType">
<option value="1">轮播图</option>
<option value="2">轮播图SeriousLose</option>
<option value="3">SeriousLose1</option>
<option value="4">SeriousLose2</option>
</select></p>
<p><input type="button" id="btn" value="添加"></p>
</form>
// 获得表单按钮元素
var btn=document.querySelector("#btn");
// 为按钮添加点击事件
btn.onclick=function(){
// 根据ID获得页面当中的form表单元素
var form=document.querySelector("#advForm");
// 将获得的表单元素作为参数,对formData进行初始化
var formdata=new FormData(form);
// 通过get方法获得name为advName元素的value值
console.log(formdata.get("advName"));//xixi
// 通过get方法获得name为advType元素的value值
console.log(formdata.get("advType"));//1
}
取值
FormData.get()
// 获取key为age的第一个值
formdata.get("age");
FormData.getAll()
FormData
对象中与给定键关联的所有值的数组。// 获取key为age的所有值,返回值为数组类型
formdata.getAll("age");
添加数据
FormData.append()
FormData
中添加新的属性值,FormData
对应的属性值存在也不会覆盖原值,而是新增一个值,如果属性不存在则新增一项属性值。// 通过append()方法在末尾追加key为name值为laoliu的数据
formdata.append("name","SeriousLose");
formdata.append("name","SeriousLose1");
console.log(formdata.get("name"));// SeriousLose
console.log(formdata.getAll("name"));//["SeriousLose", "SeriousLose1"];
修改数据
FormData.set()
FormData
设置属性值,如果FormData
对应的属性值存在则覆盖原值,否则新增一项属性值。// 如果key的值不存在会为数据添加一个key为name值为SeriousLose的数据
formdata.set("name","SeriousLose");
var formdata = new FormData();
formdata.append("name","SeriousLose");
formdata.append("name","SeriousLose1");
console.log(formdata.get("name"));// SeriousLose
console.log(formdata.getAll("name"));//["SeriousLose", "SeriousLose1"]
// 将存在的key为name的值修改为SeriousLose
formdata.set("name","SeriousLose2");
console.log(formdata.get("name"));// SeriousLose
console.log(formdata.getAll("name"));// ["SeriousLose"]
是否存在key
FormData.has()
formdata.has("name"); // true
删除key
FormData.delete()
formdata.delete("name");
let formData = new FormData();
formData.append('1', '2');
// 存在对象要 转成字符串存储
formData.append('2', { a: 1 });
formData.append('3', JSON.stringify({ a: 1 }));
// 第一种
for (var value of formData.values()) {
console.log(value);
}
// 第二种
for (var [a, b] of formData.entries()) {
console.log(a, b);
}