reactjs console 获取表单_前端小技巧：学会用FormData对象收集表单数据

1.FormData对象有什么用？

我们先看一个小例子：

html代码：

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

这个需求是我们大部分时候在发送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