new FormData()的作用和用法

最新推荐文章于 2023-08-15 16:33:11 发布

全栈萧腊鸡

最新推荐文章于 2023-08-15 16:33:11 发布

阅读量525

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/weixin_72244090/article/details/131822571

版权

FormData是XMLHttpRequest2的一部分，用于序列化表单数据并发送。可以通过新建实例直接创建或基于现有表单初始化。关键方法包括append用于添加数据，get和getAll用于获取，set用于设置，has用于检查键是否存在，以及delete用于删除数据。entries方法提供了一个迭代器来遍历所有条目。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 概述

FormData类型其实是在XMLHttpRequest 2级定义的，它是为序列化表以及创建与表单格式相同的数据（当然是用于XHR传输）提供便利。

2. 创建formData的方法

//第一种直接创建
var formData = new FormData();

<form id="myForm" action="" method="post">
    <input type="text" name="name">名字
    <input type="password" name="psw">密码
    <input type="submit" value="提交">
</form>

//2、使用已有的表单来初始化一个对象实例
// 获取页面已有的一个form表单
var form = document.getElementById("myForm");
// 用表单来初始化
var formData = new FormData(form);
// 我们可以根据name来访问表单中的字段
var name = formData.get("name"); // 获取名字
var psw = formData.get("psw"); // 获取密码
// 当然也可以在此基础上，添加其他数据
formData.append("token","kshdfiwi3rh");

3. 操作API

formData.get("name"); // 获取key为name的第一个值

//用append(key, value)添加数据，如果指定的key不存在则会新增一条数据，key存在，则添加到数据的末尾
formData.append("k1", "v1");
formData.append("k1", "v2");
formData.append("k1", "v1");


formData.getAll("k1"); // ["v1","v2","v1"]  返回一个数组，获取key为k1的所有值

//set(key, value)来设置修改数据，指定的key不存在则会新增一条，存在则会修改对应的value值。
formData.set("k1", "1");
formData.getAll("k1"); // ["1"]

//通过has(key)来判断是否对应的key值

formData.append("k1", "v1");
formData.append("k2",null);
 
formData.has("k1"); // true
formData.has("k2"); // true
formData.has("k3"); // false


//delete(key)，来删除数据
formData.append("k1", "v1");
formData.append("k1", "v2");
formData.append("k1", "v1");
formData.delete("k1");
 
formData.getAll("k1"); // []

//通过entries()来获取一个迭代器，然后遍历所有的数据

formData.append("k1", "v1");
formData.append("k1", "v2");
formData.append("k2", "v1");
 
var i = formData.entries();
 
i.next(); // {done:false, value:["k1", "v1"]}
i.next(); // {done:fase, value:["k1", "v2"]}
i.next(); // {done:fase, value:["k2", "v1"]}
i.next(); // {done:true, value:undefined}