FormData的基本使用详细教程

1.FormData介绍

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

利用 FormData 对象，可以通过JavaScript键值对来模拟一系列表单控件，还可以使用 XMLHttpRequest的send() 方法来异步提交表单。

2.FormData的使用

2.1 创建FormData对象

这里有一个前提是需要钱获取form表单，因为需要将form表单作为参数传入FormData对象

var form = document.querySelector('form'); //获取页面中的form表单
var formdata = new FormData(form); //创建FormData对象
formData.append("name", "zhangsan");// 通过append()方法追加数据

 2.2 常用方法

FormData.append()

向 FormData 中添加新的属性值，如果FormData 对应的属性值存在则覆盖原值，否则新增一项属性值。

FormData.set()

给 FormData 设置属性值，如果FormData 对应的属性值存在则覆盖原值，否则新增一项属性值

FormData.get()

返回在 FormData 对象中与给定键关联的第一个值

FormData.getAll()

返回一个包含 FormData 对象中与给定键关联的所有值的数组。

FormData.delete():从FormData对象里面删除一个键值对

FormData.has()

返回一个布尔值表明 FormData 对象是否包含某些键

FormData.keys()

返回一个包含所有键的iterator对象

FormData.values()

返回一个包含所有值的iterator对象。

FormData.entries()

返回一个包含所有键值对的iterator对象

3.案例演示-01

3.1创建表单

<form id="userForm">
        <p>姓名：<input type="text" name="userNamee" value="李白"></p>
        <p>性别：<input type="radio" name="sex" value="male" checked>男
            <input type="radio" name="sex" value="female" >女
        </p>
        <p>城市：<select name="city">
                <option value="1">北京</option>
                <option value="2">上海</option>
                <option value="3">广州</option>
                <option value="4">深圳</option>
            </select></p>
        <p><input type="button" id="btn" value="添加"></p>
</form>

3.2 操作方法

var btn = document.getElementById("btn");
        btn.onclick = function () {
            // 根据ID获得页面中的form表单元素
            var form = document.querySelector("#userForm");
            // 将获得的表单元素作为参数,对formData进行初始化
            var formData = new FormData(form);
            formData.append("name", "Lori");
            formData.append("name", "Jack");
            formData.append("gender", "Jacie");
            // 通过get方法只能读取第一个key为name的值
            console.log(formData.get("name")); // Lori
            // 通过getAll方法能获取到所有key为name的值
            console.log(formData.getAll("name")); //["Lori","Jack"]
            // 通过set修改数据,如果存在多个的话,就会改到只剩下一个key为name的值
            formData.set('name', "李白"); // ["李白"]
            // 如果不存在的话,就会添加一条数据
            formData.set('age', 30);
            console.log(formData.getAll('name'));
            console.log(formData.getAll('age'));
            // 通过delete方法删除key为gender的数据
            formData.delete("gender");
            console.log(formData.get('gender')); // null
            for (var keys of formData.keys()) {
                console.log(keys); // userName  sex city name age
            }
            for (var keys of formData.entries()) {
                console.log(keys); // ["userNamee", "李白"] ["sex", "male"] ["city", "1"] ["name", "李白"] ["age", "30"]
            }
            for (var keys of formData.values()) {
                console.log(keys);
            }
        }

4.案例演示-02

4.1 创建表单

<form id="userForm">
        <p>姓名：<input type="text" name="userNamee" value="李白"></p>
        <p>性别：<input type="radio" name="sex" value="male" checked>男
            <input type="radio" name="sex" value="female">女
        </p>
        <p>城市：<select name="city">
                <option value="1">北京</option>
                <option value="2">上海</option>
                <option value="3">广州</option>
                <option value="4">深圳</option>
            </select></p>
        <p>
            头像:<input type="file" name="headImg"></p>
        </p>
        <p><input type="button" id="btn" value="添加"></p>
</form>

4.2 发送数据

//1.注册点击事件，发送ajax请求
document.getElementById('btn').onclick = function () {
            var form = document.querySelector('#userForm'); //获取页面中的form表单
            var formdata = new FormData(form); //创建FormData对象
            //2.发送ajax请求
            //2.1实例化ajax对象
            var xhr = new XMLHttpRequest();
            //2.2设置请求方式和地址
            xhr.open('请求方式','url地址');
            //2.3发送请求
            xhr.send(formdata); //将FormData拿到的表单数据传入send方法，发送请求
            //2.4回调函数
            xhr.onload=function(){
                //打印相应内容
                console.log(xhr.response);
            }
}

注意：FormData方法是拿到表单中带有name的属性值，以键值对形式存入

　　(键：表单name属性的值，如果name='username',值就是username)

　　(值：输入框输入的value)

表单中带有name的属性值需要与接口参数名一致！