原来 FormData 还能这么用？一行代码搞定表单数据收集

豆包生成

---

原来 FormData 还能这么用？一行代码搞定表单数据收集

前言

今天在改登录页面的时候，发现了一个让我直呼「原来还有这种操作」的东西。

事情是这样的：我在写 AJAX 提交表单的代码，像往常一样：

var data = new FormData();
data.append('username', this.username.value);
data.append('password', this.password.value);
data.append('email', this.email.value);
data.append('remember', this.remember.checked);
// ... 还有好几个字段

写着写着就觉得烦了——表单里有几个字段，我就得写几行 append。加个新字段还要改 JS，太麻烦了。

然后突然想到：既然 FormData 是专门处理表单的，那能不能直接把整个 form 扔进去？

一查文档，还真可以！而且是官方标准用法……

---

以前的我：手动一个个 append

相信很多人跟我一样，学 FormData 的时候学的是这样：

// 创建一个空的 FormData 对象
const data = new FormData();

// 然后一个个往里塞
data.append('username', 'zhangsan');
data.append('password', '123456');
data.append('email', 'zhangsan@example.com');

然后用 AJAX 发出去。

一直以来我都是这么写的，也没觉得有什么问题，直到表单字段越来越多……

字段少还好，字段一多，写起来又啰嗦又容易漏。

---

现在的我：直接传 form 元素

其实 FormData 的构造函数直接接受一个 form 元素作为参数：

const form = document.getElementById('loginForm');
const data = new FormData(form);  // 就这一行！

它会自动把表单里所有带 name 属性的字段都收集进去。

包括：

• 文本框、密码框
• 单选框、复选框
• 下拉框
• 文本域
• 文件上传（这个超好用！）

什么概念呢？就是你表单加了新字段，JS 代码一行都不用改，自动就包含进去了。

---

举个完整的例子

假设有这样一个表单：

<form id="registerForm">
    <input type="text" name="username">
    <input type="email" name="email">
    <input type="password" name="password">
    <input type="password" name="confirm_password">
    <input type="checkbox" name="agreement">
</form>

以前的写法：

const data = new FormData();
data.append('username', form.username.value);
data.append('email', form.email.value);
data.append('password', form.password.value);
data.append('confirm_password', form.confirm_password.value);
data.append('agreement', form.agreement.checked);
// 5 个字段写 5 行，还容易漏

现在的写法：

const data = new FormData(form);  // 一行搞定

就这一行，所有字段都进去了。

---

常用方法

当然，也不是说手动 append 就没用了。有时候需要额外加一些表单里没有的字段：

const data = new FormData(form);

// 额外加个字段（比如来源页面）
data.append('from', 'login_page');

// 也可以获取、修改、删除
console.log(data.get('username'));  // 获取某个字段的值
data.set('username', 'newName');    // 覆盖某个字段
data.delete('password');            // 删除某个字段
console.log(data.has('remember'));  // 判断有没有某个字段

---

注意事项

1. 表单元素必须有 name 属性

没有 name 的输入框，FormData 会直接忽略。

<!-- ✅ 会被收集 -->
<input type="text" name="username">

<!-- ❌ 不会被收集 -->
<input type="text" id="username">

这个很重要，我一开始就踩过坑——写了 id 忘了写 name，结果怎么都收不到数据。

2. 禁用的字段不会被收集

加了 disabled 属性的输入框，FormData 会忽略它。

3. 没选中的复选框不会出现

和普通表单提交一样，没勾选的复选框在 FormData 里根本不存在这个字段。

所以后端判断要用 isset()，不能直接用。

4. 不能直接 console.log 看内容

FormData 是个特殊对象，直接 console.log(data) 看不到里面的内容，要遍历或者用 .get()：

// 遍历所有字段
for (let [key, value] of data.entries()) {
    console.log(key + ' = ' + value);
}

---

为什么很多人都不知道？

我发现一个有意思的现象：很多教程讲 FormData 的时候，都是从手动 append 开始讲，导致很多人学完了都不知道可以直接传 form。

可能是因为：

1. 教程从基础讲起，先讲空对象再讲传 form
2. 很多人学的时候只看了前半部分
3. 实际项目中经常需要额外加字段，所以手动 append 用得多

但我觉得，能直接传 form 就直接传，省事又不容易出错。需要额外字段的时候再 append 几个就行。

---

总结

new FormData(form) 是一个非常实用但很多人不知道的用法：

• ✅ 一行代码收集所有表单数据
• ✅ 加新字段不用改 JS
• ✅ 自动支持文件上传
• ✅ 官方标准 API，不是什么黑科技

以后写表单提交，再也不用一个个 append 了，真香！

💡 可以调整的地方

1. 标题：可以改成更吸引眼球的，比如《做了两年前端，今天才知道 FormData 可以这么用》
2. 语气：我写的是比较轻松的风格，符合博客园随笔的感觉
3. 例子：可以换成你自己项目里的真实例子（比如工分系统的登录表单）
4. 结尾：可以加一句「如果你也不知道这个用法，点个赞呗」之类的互动语

需要我调整什么地方吗？