form 表单默认不支持 JSON 提交，必须绕过原生提交机制
浏览器原生 <form></form> 提交永远是 application/x-www-form-urlencoded 或 multipart/form-data，不可能直接发 JSON。想用 JSON，就得拦截表单默认行为，手动构造请求。
常见错误现象：fetch 发出去的数据在后端变成空对象或字符串 "[object Object]"，本质是没序列化或错用了 Content-Type。
- 必须用
event.preventDefault()阻止原生提交 - 数据得先用
JSON.stringify()转成字符串 -
Content-Type必须显式设为application/json - 别把
FormData直接传给fetch——它和 JSON 不兼容
用 fetch + JSON.stringify 提交表单数据最稳妥
这是目前最通用、无依赖、兼容性好的做法，适用于所有现代浏览器和大多数 Node.js 后端（如 Express、Koa）。
使用场景：登录、注册、配置保存等需要结构化数据的接口；后端明确要求接收 application/json 的 API。
立即学习“前端免费学习笔记（深入）”；
参数差异：fetch 的 body 接收字符串，不是对象；JSON.stringify() 不能省，否则后端收到的是 [object Object]。
document.querySelector('form').addEventListener('submit', async (e) => {
e.preventDefault();
const formData = new FormData(e.target);
const data = Object.fromEntries(formData); // 转成普通对象
try {
const res = await fetch('/api/login', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(data) // 关键：必须 stringify
});
console.log(await res.json());
} catch (err) {
console.error(err);
}
});
后端接收 JSON 时注意 bodyParser 和 Content-Type 校验
Express 默认不解析 application/json 请求体，需配 express.json() 中间件；否则 req.body 是空对象。
容易踩的坑：
- 忘了加
app.use(express.json())，尤其在有多个中间件顺序时 - 前端发了
Content-Type: application/json，但后端没启用对应解析器 - 表单字段含文件（
<input type="file">），不能走 JSON 提交——JSON 只能传文本，文件得用FormData+multipart - 某些代理（如 Nginx）会过滤非标准
Content-Type，需确认是否放行application/json
不用 fetch 时，XMLHttpRequest 也能发 JSON，但更易出错
老项目或需要兼容 IE11 时可能用到，但手动设置 setRequestHeader 和处理响应状态更繁琐，出错率高。
性能/兼容性影响：IE11 支持 XMLHttpRequest，但不支持 fetch；不过 JSON.stringify 在 IE8+ 就存在，无需 polyfill。
- 必须在
open()后、send()前调用setRequestHeader('Content-Type', 'application/json') -
send()参数必须是字符串，不是对象 - 响应需手动
JSON.parse(xhr.responseText)，且要检查xhr.status === 200
现在除非硬性兼容要求，否则优先选 fetch。
真正麻烦的不是怎么发，而是前后端对“空值”“嵌套对象”“数组字段”的约定是否一致——比如前端传 {"tags": []}，后端是忽略、清空还是报错，得提前对齐，不然调试时根本看不出问题在哪。
