FormData
一、认识
FormData 接口提供了一种表示表单数据的键值对 key/value 的构造方式，并且可以轻松的将数据通过XMLHttpRequest.send() 方法发送出去，本接口和此方法都相当简单直接。如果送出时的编码类型被设为 multipart/form-data，它会使用和表单一样的格式。
二、语法
通过 FormData 创建一个新的 FormData 对象
const formData = new FormData();
技巧
-
formData 对象可直接在
for……of结构中使用,而不需要使用entriesconst formData = new FormData();
formData.set("key","value");
formData.set("age",23);
for(const [key,value] of formData){
console.log(key); // key age
console.log(value); //value 23
}
三、方法
3.1 formData.append()
formData.append() 向 FormData 中添加新的属性值，FormData 对应的属性值存在也不会覆盖原值，而是新增一个值，如果属性不存在则新增一项属性值。
语法
const formData = new FormData();
formData.append("key","value");
3.2 formData.delete()
formData.delete() 从 FormData 对象里面删除一个键值对。
语法
const formData = new FormData();
formData.append("key","value");
formData.append("age",23);
formData.delete("key");
3.3 formData.entries()
formData.entries() 返回一个包含所有键值对的iterator对象。
语法
const formData = new FormData();
formData.append("key","value");
formData.append("age",23);
const iterator = formData.entries();
console.log(iterator)
场景
const formData = new FormData();
formData.append("key","value");
formData.append("age",23);
const iterator = formData.entries();
for(const item of iterator){
console.log(item) // ['key', 'value'] ['age', '23']
}
3.4 formData.get()
formData.get() 返回在 FormData 对象中与给定键关联的第一个值。
语法
const formData = new FormData();
formData.append("key","value");
formData.append("age",23);
const value = formData.get("key");
console.log(value);
3.5 formData.getAll()
formData.getAll() 返回一个包含 FormData 对象中与给定键关联的所有值的数组。
语法
const formData = new FormData();
formData.append("key","value1");
formData.append("key","value2");
formData.append("age",23);
const valueList = formData.getAll("key");
console.log(valueList); // ['value1', 'value2']
3.6 formData.has()
formData.has() 返回一个布尔值表明 FormData 对象是否包含某些键。
语法
const formData = new FormData();
formData.append("key","value");
formData.append("age",23);
const isHas = formData.has("key");
console.log(isHas);
3.7 formData.keys()
formData.keys() 给 FormData 设置属性值，如果FormData 对应的属性值存在则覆盖原值，否则新增一项属性值。
语法
const formData = new FormData();
formData.append("key","value");
formData.append("age",23);
const keys = formData.keys();
console.log(keys);
场景
const formData = new FormData();
formData.append("key","value");
formData.append("age",23);
const keys = formData.keys();
for(const key of keys){
console.log(key) // key age
}
3.8 formData.set()
formData.set() 给 FormData 设置属性值，如果FormData 对应的属性值存在则覆盖原值，否则新增一项属性值。
语法
const formData = new FormData();
formData.set("key","value");
formData.set("age",23);
console.log(formData);
3.9 formData.values()
formData.values() 返回一个包含所有值的iterator对象。
语法
const formData = new FormData();
formData.set("key","value");
formData.set("age",23);
const values = formData.values();
console.log(values);
场景
const formData = new FormData();
formData.set("key","value");
formData.set("age",23);
const values = formData.values();
for(const value of values){
console.log(value); // value 23
}
四、场景
4.1 表单序列化
FormData 可以将HTML表单序列化，映射成表单对象。注意仅限表单中带有name属性的表单空间
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Ajax</title>
</head>
<body>
<form id="form">
<div>
<label for="username">用户名:</label>
<input type="text" name="username" />
</div>
<div>
<label for="password">密码:</label>
<input type="password" name="password" />
</div>
<div>
<button id="btn">发送</button>
</div>
</form>
<script>
const btn = document.getElementById("btn");
btn.addEventListener("click", function (e) {
e.preventDefault();
const form = document.getElementById("form");
const formData = new FormData(form);
for (const [key, value] of formData) {
console.log(key, value);
}
});
</script>
</body>
</html>