javascript FormData 对象的如何使用方法

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

创建一个 FormData 对象

1、创建一个空的 Formdata 对象

<script>
//通过FormData构造函数创建一个空对象
var formdata = new FormData();
//可以通过append()方法来追加数据
formdata.append("name", "feiniaomy.com");
//通过get方法对值进行读取
console.log(formdata.get("name"));
//feiniaomy.com
//通过set方法对值进行设置
formdata.set("name", "mochu");
console.log(formdata.get("name"));
//mochu
</script>

2、通过HTML form 表单对 FormData 进行初始化

<form id="advForm">
    <input type="text" name="name" >
    <input type="text" name="sex" >
    <select name="add" >
        <option value="1">上海</option>
        <option value="2">山东</option>
        <option value="3">北京</option>
    </select>
    <button id="btn">提交</button>
</form>
<script>
//获得表单按钮元素
var btn = document.getElementById("#btn");
//为按钮添加点击事件
btn.onclick = function () {
    //根据ID获得页面当中的form表单元素
    var form = document.getElementByIdr("advForm");
    //将获得的表单元素作为参数，对formData进行初始化
    var formdata = new FormData(form);
    //通过get方法获得name为name元素的value值
    console.log(formdata.get("name"));//xixi
    //通过get方法获得name为sex元素的value值
    console.log(formdata.get("sex"));//1 
}
</script>

js Formdata 对象中的方法使用

1、FormData.get(key) 与 FormData.getAll(key) 获取form 对像中对应的值

<script>
// 获取key为name的第一个值
formdata.get("name");
// 获取key为add的所有值，以数组类型返回
formdata.getAll("add");
</script>

2、FormData.append(key,value) 对 FormData 对象追加数据

<script>
var formdata = new FormData();
formdata.append("name", "mochu");
formdata.append("age", "18");
console.log(formdata.get("name"));// mochu
console.log(formdata.get("age"));// 18
</script>

3、FormData.set(key,value) 添加或修改数据

<script>
//通过FormData构造函数创建一个空对象
var formdata = new FormData();
//如果 key 已存在则为修改其value值，如不存在则被会添加
formdata.set("name", "mochu");
console.log(formdata.get("name"));// mochu
</script>

4、FormDate.has(key) 判断key值是否存在

<script>
var formdata = new FormData();
formdata.append("name", "feiniaomy.com");
//判断是否包含key为name的数据
console.log(formdata.has("name"));//true
//判断是否包含key为age的数据
console.log(formdata.has("age"));//false
</script>

5、FormData.delete(key) 删除指定key值的数据

<script>
var formdata = new FormData();
formdata.append("name", "feiniaomy.com");
console.log(formdata.has("name")); //true
//删除KEY为name的数据
formdata.delete('name');
console.log(formdata.has("name")); //false
</script>

FormData 对象数据通过XMLHttpRequest发送的方法

示例代码

<form id="advForm">
    <input type="text" name="name" >
    <input type="text" name="sex" >
    <select name="add" >
        <option value="1">上海</option>
        <option value="2">山东</option>
        <option value="3">北京</option>
    </select>
    <button id="btn">提交</button>
</form>
<script>
var btn = document.getElementById("btn");
btn.onclick = function () {
    var formdata = new FormData(document.getElementById("dvForm"));
    var xhr = new XMLHttpRequest();
    xhr.open("post", "http://127.0.0.1/pst");
    xhr.send(formdata);
    xhr.onload = function () {
        if (xhr.status == 200) {
            //...
        }
    }
}
</script>

到此这篇关于 javascript FormData 对象的如何使用方法就介绍到这了。穿过层层叠叠的流离时光，越过跌跌荡荡的万水千山，我一直走，一直走，来到你的面前，自此，驻足，沦落。早安！更多相关 javascript FormData 对象的如何使用方法内容请查看相关栏目，小编编辑不易，再次感谢大家的支持！