php读取form表单技巧_前端小技巧学会用FormData对象收集表单数据

文章目录 [+]

html代码：

需求：是获取form表单中的用户名和密码并包装成一个工具

php读取form表单技巧_前端小技巧学会用FormData对象收集表单数据

这个需求是我们大部分时候在发送ajax要求时须要做的一个事情。

（图片来自网络侵删）

传统JS写法：

function mysubmit(){ let usernameEle=document.getElementById(\"大众username\"大众); let username=usernameEle.value; let passwordEle=document.getElementById(\"大众password\"大众); let password=passwordEle.value; let user={ username:username, password:password }; console.log(user);}

看一下效果：

可以看到，我们已经实现了需求，但是我们写的JS代码很繁琐，我们须要先获取form表单中input框元素，然后元素的value值，末了包装成一个工具。

FormData的JS写法：

function mysubmit(){ let form=document.getElementById(\"大众form\"大众); let formData=new FormData(form); //将form表单中的信息包装成键值对的形式，返回一个工具 console.log(formData.get(\"大众username\公众));//通过get方法获取键对应的值 console.log(formData.get(\公众password\"大众)); }

效果如下：

通过这个例子你该当能感想熏染到FormData的便利性，只须要 new FormData(form) 一句代码就可以把form表单内的所有信息都以键值对的形式包装成一个工具返回。

2.FormData用法先容

FormData工具是用来将form表单数据编译成键值对，这么做有两个好处：

直接将表单元素的name和value进行组合，减少个人的信息拼接事情异步上传文件

FormData的常用操作方法：

get(key)和getAll(key)获取键对应的值

// 获取key为username的第一个值formData.get(\"大众username\"大众); // 获取key为username的所有值，返回值为数组类型formData.getAll(\公众username\公众);append(key,value)追加数据

formData.append(\"大众age\"大众,18);//增加一个age数据set(key,value)修正数据值

formData.set(\公众username\"大众,\"大众lucy\"大众) //将username对应的键值改为lucyhas(key)检讨是否有该key对应的值

formData.has(\"大众username\"大众) //true,表示表单含有username键对应的值delete(key)删除该key对应的值

formData.delete(\"大众username\"大众) //将username键对应的值删除3.总结