JS-FormData对象使用

Working问题册 评论

问题场景

创建FormData对象作为某请求的参数，程序调试过程中想要查看该对象内容，使用console.log()打印得到空对象。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
let formData = new FormData();
formData.append("k1", "v1");
formData.append("k2", "v2");
formData.append("k3", "v3");

console.log(formData);
// FormData
  // [[Prototype]]: FormData
    // append: ƒ append()
    // delete: ƒ delete()
    // entries: ƒ entries()
    // forEach: ƒ forEach()
    // get: ƒ ()
    // getAll: ƒ getAll()
    // has: ƒ has()
    // keys: ƒ keys()
    // set: ƒ ()
    // values: ƒ values()
    // constructor: ƒ FormData()
    // Symbol(Symbol.iterator): ƒ entries()
    // Symbol(Symbol.toStringTag): "FormData"
    // [[Prototype]]: Object
image-20231107215941664

解决方案

使用formData.get("key"); 获取FormData中的值

1
2
3
formData.get("k1"); // v1
formData.get("k2"); // v2
formData.get("k3"); // v3

相关知识

1.FormData是一种特殊的对象类型，不可序列化，因此使用console.log()直接打印显示的是FormData原型。

2.创建FormData对象

【直接创建一个空对象】

1
var formData = new FormData();//通过append方法添加数据

【使用已有表单来初始化对象】

1
2
3
4
5
<form id="myForm" action="" method="post">
    <input type="text" name="name">名字
    <input type="password" name="psw">密码
    <input type="submit" value="提交">
</form>
1
2
3
4
// 获取页面已有的一个form表单
var form = document.getElementById("myForm");
// 用表单来初始化
var formData = new FormData(form);

3.相关操作方法

【添加数据】

1
2
3
4
// 添加数据
formData.append("k1", "v1");
formData.append("k1", "v2"); // 追加
formData.set("k1", "v1"); // 覆盖

FormData接口的 append()方法会添加一个新值到 FormData 对象内的一个已存在的键中，如果键不存在则会添加该键。

FormData.set和 append() 的区别在于，如果指定的键已经存在， FormData.set会使用新值覆盖已有的值，而 append() 会把新值添加到已有值集合的后面。

【获取数据】

1
2
3
4
5
formData.append("k1", "v1");
formData.append("k1", "v2");
// 获取数据
formData.get("k1"); // v1
formData.getAll("k1", "v2"); // ['v1', 'v2']

FormData的 get() 方法用于返回 FormData 对象中和指定的键关联的第一个值

FormData的 getAll() 方法会返回和指定键关联的全部值

【判断是否存在】

1
2
3
formData.append("k1", "v1");
// 判断是否对应的key值
formData.has("k1"); // true

【删除数据】

1
2
// 删除数据
formData.delete("k1");

【获取keys】

1
2
3
4
5
6
7
8
9
// 先创建一个 FormData 对象
var formData = new FormData();
formData.append("key1", "value1");
formData.append("key2", "value2");

// 输出所有的 key
for (var key of formData.keys()) {
  console.log(key);
}

FormData.keys() 该方法返回一个迭代器（iterator），遍历了该 formData 包含的所有 key，这些 key 是 String对象。

【获取values】

1
2
3
4
5
6
7
8
9
//创建一个 FormData 测试对象
var formData = new FormData();
formData.append("key1", "value1");
formData.append("key2", "value2");

//显示值
for (var value of formData.values()) {
  console.log(value);
}

FormData.values() 方法返回一个允许遍历该对象中所有值的 迭代器 。这些值是 String或是Blob 对象。

【获取key和value】

1
2
3
4
5
6
7
8
9
//创建一个 FormData 测试对象
var formData = new FormData();
formData.append("key1", "value1");
formData.append("key2", "value2");

// Display the key/value pairs
for (var pair of formData.entries()) {
  console.log(pair[0] + ", " + pair[1]);
}

FormData.entries() 方法返回一个 iterator对象，此对象可以遍历访问 FormData 中的键值对。其中键值对的 key 是一个 String对象；value 是一个 String, 或者 Blob对象。

参考内容

FormData - Web API 接口参考 | MDN (mozilla.org)

FormData控制台打印为空及使用方法 - Jade_g - 博客园 (cnblogs.com)

枫与风