formdata 构造函数传入表单元素可自动采集所有带 name 的有效字段值，包括文本、选择、复选、文件等；支持 append/set 动态增改数据；配合 fetch 提交时无需手动设 content-type。
直接用 FormData 构造函数传入表单元素，它会自动读取所有带 name 属性的控件值，包括文本框、选择框、复选框、文件输入等，无需手动遍历。
创建 FormData 时传入表单 DOM 元素
这是最常用也最省事的方式。只要表单 HTML 结构规范（每个有效字段都有 name），FormData 就能自动采集：
- 确保表单中每个需要提交的字段（
<input>、<select></select>、<textarea></textarea>、<button></button>）都设置了name属性 -
type="checkbox"或type="radio"只有在被勾选/选中状态下才会被包含 - 禁用（
disabled）的字段会被自动忽略 - 文件输入（
<input type="file">）的文件对象也会被正确捕获，适合上传场景
示例：
<script> const form = document.getElementById('myForm'); const data = new FormData(form); // ✅ 自动提取全部有效字段 </script>手动追加或修改字段（补充或覆盖默认行为）
如果需要添加额外参数、动态修改某个值，或处理未绑定 name 的临时数据，可以用 .append() 或 .set()：
-
data.append('token', 'abc123')：追加字段（允许同名多值，如多个文件） -
data.set('username', 'bob')：替换已有字段（只保留一个值，同名旧值被清除） - 注意：
set()对文件字段同样生效，但会丢弃原文件引用
配合 fetch 提交（支持文件 + 普通字段混合）
FormData 天然适配 fetch，不用设 Content-Type，浏览器会自动设置为 multipart/form-data 并带上正确 boundary：
fetch('/api/register', {
method: 'POST',
body: data // 直接传入 FormData 实例
})
.then(r => r.json())
.then(console.log);
⚠️ 注意：不要手动设置 headers: {'Content-Type': '...'}，否则会破坏 multipart 格式，导致后端无法解析。
调试技巧：快速查看收集了哪些数据
开发时可把 FormData 转成普通对象打印，方便验证：
const obj = Object.fromEntries(data.entries());
console.log(obj); // { username: "alice", role: "admin", agree: "on" }
// 若有多个同名字段（如多选 checkbox），用 Array.from + groupBy 方式查看
const entries = Array.from(data.entries());
const grouped = entries.reduce((acc, [k, v]) => {
if (!acc[k]) acc[k] = [];
acc[k].push(v);
return acc;
}, {});Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
