表单异步提交需拦截submit事件并调用event.preventdefault()，用formdata自动收集带name的字段（含文件），且不可手动设置content-type；后端须正确解析multipart/form-data边界格式。
form 标签本身不支持异步提交，必须靠 JavaScript 拦截
HTML 的 <form></form> 默认是同步全页跳转提交，所谓“异步提交”本质是阻止默认行为，用 fetch 或 XMLHttpRequest 手动发请求。很多人卡在没调 event.preventDefault()，结果表单照常刷新页面。
常见错误现象：fetch 发出去了，但页面一闪就白屏或跳转；控制台没报错，但后端根本收不到请求 —— 基本就是这个原因。
- 监听
submit事件，不是click - 必须在事件回调第一行写
event.preventDefault() - 推荐用
FormData构造请求体，它能自动按 name 属性收集所有<input>、<select></select>、<textarea></textarea>
用 FormData 自动收集 form 内所有字段（含文件）
FormData 是最省心的方式，尤其当表单里有 type="file" 或动态增删字段时。它不依赖 value 属性，而是读 DOM 实时状态，包括用户刚选的文件、勾选的 checkbox、多选的 select。
注意：checkbox 和 radio 只有被选中才会被包含；未选中的不会出现在 FormData 中 —— 这和后端接收逻辑强相关，别假设“没传= false”，要主动处理缺失情况。
const form = document.querySelector('form');
form.addEventListener('submit', async (e) => {
e.preventDefault();
const data = new FormData(form); // 自动抓取所有带 name 的控件
const res = await fetch('/api/submit', {
method: 'POST',
body: data // 不要设 Content-Type，让浏览器自动设 multipart/form-data
});
});
fetch 提交时 content-type 的坑：文件上传不能手动设 header
如果表单含 <input type="file">，用 FormData 时千万不能手动设置 Content-Type 请求头。浏览器会生成类似 multipart/form-data; boundary=----WebKitFormBoundary... 的带边界标识的格式，手动设 header 会覆盖 boundary，导致后端解析失败，常见错误是后端收到空文件或整个 body 解析为字符串。
- 上传纯文本字段（无文件）：可改用
JSON.stringify()+application/json，但需后端配合 - 混传文本+文件：必须用
FormData，且不设Content-Type - 想看实际发出的请求头？打开 DevTools → Network → 点开请求 → Headers → Request Headers，确认
Content-Type是自动生成的
后端接收不到字段？检查 input 的 name 属性是否为空或重复
FormData 完全依赖 name 属性，没有 name 的 <input>（比如只写了 id 或 data-* ）会被直接忽略。另外，多个 checkbox 共享一个 name 是合法的，但若误写成相同 name 的 text 和 checkbox，后端可能只收到最后一个值（取决于语言实现）。
- 每个需要提交的控件都必须有非空、唯一的
name（同组 checkbox 除外） - 避免用
name="undefined"或name=""，这些不会进FormData - 调试时可在控制台打印：
for (let [k, v] of new FormData(form)) console.log(k, v)
表单异步提交真正的复杂点不在发送动作本身，而在于错误反馈、重复提交防护、以及后端对 FormData 边界格式的兼容性。尤其当团队前后端技术栈不统一时，一个没声明 boundary 处理的 Node.js/Koa 中间件，或 PHP 里没开 file_uploads，都会让前端看似正常的请求静默失败。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
