JS中 new FormData() - FormData对象的作用及用法

JS中 new FormData() - FormData对象的作用及用法js FormData 方法介绍formData是ajax2.0(XMLHttpRequest Level2)新提出的接口,利用FormData对象可以将form表单元素的name与value进行组合,实现表单数据的序列化,从而介绍表单元素的拼接,提高工作效率首先我们需要先创建一下这个 FormData 对象var for

没有天赋全靠手打

9066人浏览 · 2021-06-08 18:25:11

没有天赋全靠手打 · 2021-06-08 18:25:11 发布

JS中 new FormData() - FormData对象的作用及用法

js FormData 方法介绍

formData是ajax2.0(XMLHttpRequest Level2)新提出的接口,利用FormData对象可以将form表单元素的name与value进行组合,实现表单数据的序列化,从而介绍表单元素的拼接,提高工作效率

首先我们需要先创建一下这个 FormData 对象

var formData = new FormData();  // 空的实例对象
// FormData() 实例的创建
// new FormData ( HTMLFormElement: ele)

在使用 FormData 构造函数创建实例对象的时候，可以传递一个HTML表单元素，改元素允许是任何形式的表单控件，包括文件输入框、复选框等。

我们打印一下这个构造函数
在这里插入图片描述
打印之后发现 FormData 的结构本身是很简单的，在原型对象上也只有 append、foreach 、keys 等少数方法。

FormData 的主要方法

has => 返回一个布尔值表明 FormData 对象是否包含某些键
get => 返回在 FormData 对象中与给定键关联的第一个值
getAll => 返回一个包含 FormData 对象中与给定键关联的所有值的数组
append => 向FormData 中添加新的属性值，如果FormData 对应的属性值存在则覆盖原值，否则新增一项属性值。
set => 与 append() 的区别是，如果指定的键已经存在，set() 会使用新值覆盖已有的值，而 append() 会把新值添加到已有值集合的后面。
delete => 从FormData对象里面删除一个键值对
keys => 返回一个包含所有键的iterator对象
values => 返回一个包含所有值的iterator对象。
forEach => 遍历FormData 对象
entries => 返回一个包含所有键值对的iterator对象

FormData 存储数据方式

一对key / value 组成一条数据，key 是唯一的，一个 key 可以对应多个value，如果是使用表单初始化，那每一个表单字段对应一条数据，它们的HTML name 属性即为 key 值，它们的value属性即为对应的value值。
在这里插入图片描述

实例使用

<body>
    <form name="formTest" id="myForm">
        <input type="text" placeholder="请输入用户名" name="user" value="wendingding">
        <input type="text" placeholder="请输入用户名" name="user" value="zidingyi">
        <input type="password" placeholder="请输入密码" name="pass" value="123456789">
    </form>
    <script>
        let myForm = document.getElementById("myForm")
        var formdata = new FormData(myForm);
        //  通过get(key)/getAll(key)来获取对应的value，
        let getValue = formdata.get("user")  // 拿到 name 为 user 的第一个value值
        let getAllValue = formdata.getAll("user")  // 拿到 name 为 user 的全部value值，返回一个数组

        //  通过 append()/set() 添加数据
        let addappend = formdata.append("user",'wendingding')  // 需要添加的数据已存在，则添加到后面
        let addset = formdata.set("user","wendingding") // 需要添加的数据已存在，则用新的数据替换旧的

        //  通过 delete() 删除
        let deleteValue = formdata.delete("user")  // 接收一个参数，表示你要删除的 key 值的名字，如果有多个相同 key 值，会一并删除

        //  通过 has() 判断 FormData() 对象是否含有该 key 
        console.log(formdata.has("user")); // 返回一个 Boolean 值

        //  通过 keys() 遍历 FormData 对象中所有的 key。
        for(let key of formdata.keys()){
            console.log(key);  // 返回所有key
        }

        // 通过 values() 遍历 FormData 对象中所有的 value。
        for(let value of formdata.values()){
            console.log(value);  // 返回所有 value
        }

        // 通过 entries() 遍历 FormData 对象中所有的 key 和 value。
        for(let pair of formdata.entries()){
            console.log(pair[0] +"," + pair[1]);
        }
    </script>
</body>