FormData 简单介绍与用法

发布时间：2022-12-31 16:43:14 来源：网络

.

工作是一种乐趣时，生活是一种享受！工作是一种义务时，生活则是一种苦役。对待平凡的工作要用不平凡的态度去面对。

FormData是XMLHttpRequest Level 2提供的一个接口对象，用以将数据编译成键值对，以便于XMLHttpRequest来发送数据。它可以用来模拟来添加，删除或判断表单数据，还可以用于文件的上传操作。

FormData 使用方法

1、FormData 用来处理一个html表单数据

例：

<!--表单数据-->
<form id="myForm" action="" method="post">
    <input type="text" name="host" value="http://feiniaomy.com">名字
    <input type="text" name="hostname" value="">密码
    <input type="submit" value="提交">
</form>
<script>
// 获取页面已有的一个form表单
var form = document.getElementById("myForm");
// 用表单来初始化
var formData = new FormData(form);
// 根据name来访问表单中的字段
var host = formData.get("host"); // 获取名字
console.log(host);
</script>

2、单独创建一个 FormData 空白

对象并添加此数据

例代码：

var FormData = new FormData();
FormData.append('host','http://feiniaomy.com');

3、FormData 添加一个数据

FormData 可以通过append(key, value)来添加数据，如果指定的key不存在则会新增一条数据，如果key存在，则添加到数据的末尾(相当于数组)

例代码：

var FormData = new FormData();
FormData.append("host", "http://feiniaomy.com"); //添加一条
FormData.append("tag", "php好代码教程"); //添加一条
FormData.append("tag", "html好代码教程"); //同一个值再添加一条
FormData.append("tag", "JS好代码教程"); //同一个值再添加一条

4、FormData 获取一个数据

FormData 可以使用 get 或 getALL 来取值

例代码：

console.log(FormData.get('tag'));
// php好代码教程
console.log(FormData.getAll('tag'));
// ['php好代码教程', 'html好代码教程', 'JS好代码教程']

5、FormData 修改数据

FormData 通过 set(key, value)来设置修改数据，如果指定的key不存在则会新增一条，如果存在，则会修改对应的value值

例代码：

console.log(FormData.get('host'));
// http://feiniaomy.com
FormData.set('host','http://baidu.com'); //修改数据
console.log(FormData.get('host'));
// http://baidu.com

6、FormData 判断数据是否存在

FormData 可以通过 has(key) 来判断是否有对应的key值

例代码：

console.log(FormData.has('host'));
// true
console.log(FormData.has('name'));
// false

7、FormData 删除数据

FormData 使用 delete(key) 来删除数据

例代码：

console.log(FormData.has('host'));
// true
FormData.delete("host"); //删除数据
console.log(FormData.has('host'));
// false

8、FormData 的应用

FormData 一般用于数据的 ajax 提交！

例代码：普通的表单提交

<!--表单数据-->
<form id="myForm" >
    <input type="text" name="host" value="http://feiniaomy.com">名字
    <input type="text" name="hostname" value="">密码
    <input type="button" id="btn" value="提交">
</form>
<script>
var btn=document.querySelector("#btn");
btn.onclick=function(){
    var formdata=new FormData(document.getElementById("myForm"));
    var xhr=new XMLHttpRequest();
    xhr.open("post","http://127.0.0.1/adv");
    xhr.send(formdata);
    xhr.onload=function(){
        if(xhr.status==200){
            //...
        }
    }
}
</script>

例代码：FormData 带有文件的上传

<!--表单数据-->
<form name="form1" id="form1">
    <input id="file" type="file" name="file"></input>
    <input type="text" name="host" value="feiniaomy.com">
    <input type="button" id="btn" value="提交">
</form>
<script>
    var btn=document.querySelector("#btn");
    btn.onclick=function(){
        var form = document.getElementById("form1");
        var formdata = new FormData(form);
        $.ajax({
            type : 'post',
            url : 'data.php',
            data : formdata,
            cache : false, //不缓存数据
            processData:false, // 不处理发送的数据，因为data值是Formdata对象，不需要对数据做处理
            contentType:false, // 不设置Content-type请求头
            success:function(){
            },
            error:function(){
            }
        })
    }
</script>

本文FormData 简单介绍与用法到此结束。新路开始常是狭窄的，但它却是自我延伸拓宽的序曲。小编再次感谢大家对我们的支持！

以下您可能有感兴趣的文章: