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 简单介绍与用法到此结束。新路开始常是狭窄的,但它却是自我延伸拓宽的序曲。小编再次感谢大家对我们的支持!