表单数据需用JavaScript手动转JSON再fetch发送，不能直接提交；FormData须遍历entries提取值并类型转换，跳过文件；fetch需设Content-Type、credentials，拦截submit事件并preventDefault。
表单数据怎么转成 JSON 发送到后端
浏览器原生 <form> 默认用 application/x-www-form-urlencoded 或 multipart/form-data 提交，不支持直接发 JSON。想发 JSON，必须绕过原生提交机制，改用 JavaScript 手动序列化 + fetch（或 XMLHttpRequest）发送。
用 FormData 转 JSON 容易踩哪些坑
FormData 本身是键值对容器，不能直接转成标准 JSON 对象——它会丢弃重复键、忽略 undefined、把文件对象变成 [object File] 字符串。真要转，得手动遍历提取：
- 对每个
entry调用formData.get(key)，而不是Object.fromEntries(formData)（后者在有同名多选框或文件时出错） - 日期、布尔、数字字段会被当成字符串，需手动转换：
JSON.parse('true')或Number(val) - 文件字段不能塞进 JSON，要么跳过，要么用
FileReader转 base64（注意体积和性能）
示例片段：
const form = document.querySelector('form');
const formData = new FormData(form);
const data = {};
for (const [key, value] of formData.entries()) {
if (value instanceof File) continue; // 跳过文件
data[key] = value === 'true' ? true : value === 'false' ? false : Number(value) || value;
}
fetch('/api/submit', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(data)
});
fetch 提交 JSON 时 Content-Type 和错误处理要点
只设 headers: {'Content-Type': 'application/json'} 不够，后端还可能校验 Accept 或要求 CSRF token。常见疏漏：
立即学习“前端免费学习笔记（深入）”；
- 没加
credentials: 'same-origin'导致带 cookie 的请求被拒绝（尤其登录态接口） - 没处理 400 类错误响应体，比如后端返回
{ "error": "email is required" }，但前端只看response.ok -
JSON.stringify()遇到循环引用直接抛TypeError，建议加 try/catch 或用structuredClone()（仅现代浏览器）预检
要不要用 form.addEventListener('submit') 拦截
要。否则用户点提交按钮会触发原生跳转或刷新，JSON 请求根本发不出去。
- 必须在事件回调里调用
event.preventDefault() - 推荐绑定在
<form>上，而不是按钮的click，避免回车提交逃逸 - 如果表单含
type="submit"按钮，且没阻止默认行为，就一定会走原生流程
复杂点在于：表单验证逻辑、加载状态、错误提示都要自己补全——浏览器原生的 reportValidity() 和 :valid 样式依然可用，但提交动作已完全接管。
