当前位置:首页 > 电脑知识 > 正文内容

全程干货(formdata用法详解)formdata是什么,FormData 简单介绍与用法,FormData 简单介绍与用法,

sauo3年前 (2022-09-17)电脑知识106

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

FormData 使用方法

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

例:

JavaScript
<!--表单数据--> <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 空白

对象并添加此数据

例代码:

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

3、FormData 添加一个数据

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

例代码:

JavaScript
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 来取值

例代码:

JavaScript
console.log(FormData.get(tag)); // php教程 console.log(FormData.getAll(tag)); // [php教程, html教程, JS教程]复制

5、FormData 修改数据

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

例代码:

JavaScript
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值

例代码:

JavaScript
console.log(FormData.has(host)); // true console.log(FormData.has(name)); // false复制

7、FormData 删除数据

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

例代码:

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

8、FormData 的应用

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

例代码:普通的表单提交

JavaScript
<!--表单数据--> <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 带有文件的上传

JavaScript
<!--表单数据--> <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 感谢分享!

分享到:

扫描二维码推送至手机访问。

版权声明:本文由冬眠先生个人博客发布,如需转载请注明出处。

本文链接:http://blog.sauo.top/?id=311

分享给朋友:

“全程干货(formdata用法详解)formdata是什么,FormData 简单介绍与用法,FormData 简单介绍与用法,” 的相关文章

新鲜出炉(ubuntu系统与centos系统区别)ubuntu还是centos,centos系统与ubuntu系统的区分,centos系统与ubuntu系统的区分,

免费领取腾讯云服务器! Linux的发行版有很多,而我们经常使用的为centos与ubuntu,下面这篇博文就说说这两个系统的发源与区别。 CentOS CentOS(Community Enterprise Operati...

这都可以(PHP百度百科)pHp是什么,php中关于strtotime函数31日取前几个月日期的BUG,php中关于strtotime函数31日取前几个月日期的BUG,

免费领取腾讯云服务器! 在使用php脚本中的 strtotime 函数取前几个月的日期时,发现每到31日时,取出的前几个月的日期都会出现错误。仔细检查了一下,发现在利用 strtotime 函数取前几个月的日期时,给 strtotime 函数的参数并不规范...

全程干货(查看php是否启动)查看php是否支持rar解压,查看php是ts版本还是nts版本的方法,查看php是ts版本还是nts版本的方法,

全程干货(查看php是否启动)查看php是否支持rar解压,查看php是ts版本还是nts版本的方法,查看php是ts版本还是nts版本的方法,

免费领取腾讯云服务器! 今天有用户来询问php的ts版本与php的nts版本的区别是什么,怎么去查看自己安装的php服务是ts版本还是nts版本,下面博文就来详细的说一下。 php ts版本与nts版本的区别 php官方提供...

没想到(PHP重定向)php获取重定向后的地址,php实现页面重定向的方法,php实现页面重定向的方法,

免费领取腾讯云服务器! php脚本实现页面重定向有多种方法,下面列几种简单的方法,供大家来参考一下。 php实现页面重定向的方法 方法1: 使用php中的 header() 函数来实现页面的跳转,实现重定向的...

一看就会(imagefilter过滤图像方法)php imagefill,php imagefilter()图片滤镜函数的用法与示例,php imagefilter()图片滤镜函数的用法与示例,

一看就会(imagefilter过滤图像方法)php imagefill,php imagefilter()图片滤镜函数的用法与示例,php imagefilter()图片滤镜函数的用法与示例,

免费领取腾讯云服务器! 有个小需求,需要使用php代码对图片进行颜色调整,比如变成灰色,改变图片的亮度,对比度等等。而php中就内置了一个图片的滤镜函数 imagefilter() ,下面就来具体说说这个函数的用法。 php imagefi...

难以置信(php错误日志在哪里)PHP 日志,php设置错误日志的方法,php设置错误日志的方法,

难以置信(php错误日志在哪里)PHP 日志,php设置错误日志的方法,php设置错误日志的方法,

免费领取腾讯云服务器! php设置错误日志需要在php配置文件php.ini中设置,只需要简单的几步设置就可以实现,下面就来详细的说一下。 php设置错误日志的方法 1、打开php的配置文件,php.ini...

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。