全程干货(formdata用法详解)formdata是什么,FormData 简单介绍与用法,FormData 简单介绍与用法,
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
>复制
本文链接:http://blog.sauo.top/?id=311 感谢分享!