必须用 fetch 或 xmlhttprequest 发起请求并调用 response.json() 才能获取 json 响应；需阻止表单默认提交、设置 content-type: application/json，并确保后端返回合法 json。
表单提交后怎么拿到JSON响应
浏览器原生表单不解析JSON，fetch 或 XMLHttpRequest 才能读取响应体内容。直接用 <form></form> 提交到后端，页面会跳转或刷新，根本拿不到 response.json()。
- 必须改用 JavaScript 发起请求（比如
fetch），并显式调用response.json() - 表单需加
Event.preventDefault()阻止默认提交行为 - 后端返回的 Content-Type 必须是
application/json，否则response.json()会抛错Unexpected Token - 如果后端返回的是 JSON 字符串（比如
"{...}"被引号包着），前端要先JSON.parse()一次，再处理
fetch POST 表单数据怎么传 JSON
表单字段不是自动变成 JSON 的——你得手动收集、序列化。别直接把 FormData 丢给 fetch，它发的是 multipart/form-data，和 JSON 格式不兼容。
- 用
new FormData(form)收集字段，再转成对象：Object.fromEntries(new FormData(form)) - 再用
JSON.stringify()包一层，发出去才是标准 JSON -
headers必须设Content-Type: application/json，否则后端可能拒收或解析失败 - 注意：日期、
File、undefined这类值不能直接 JSON 序列化，要提前处理（比如转字符串或过滤掉）
JSON 解析失败常见错误信息
response.json() 报错基本就三类原因，对应不同修复路径：
SyntaxError: Unexpected token → 后端返回了 html（比如 500 页面、重定向、nginx 错误页），检查网络面板看真实响应内容-
SyntaxError: Unexpected end of JSON input→ 响应体为空，或后端没写res.json({...})，而是写了res.send('{...}')却没设 header -
TypeError: response.json is not a function→ 你用的是XMLHttpRequest，不是fetch；或者 response 已经被读过一次（json()只能调一次）
要不要在表单里监听 input 实时解析 JSON
不需要，也不建议。JSON 解析是服务端响应后的动作，和用户输入无关。如果你看到“实时解析 JSON”，大概率是混淆了「校验表单字段」和「解析接口响应」。
立即学习“前端免费学习笔记（深入）”；
- 前端校验用
input+checkValidity()或自定义规则，和 JSON 无关 - 想预览结构？那是把用户输入拼成对象后
JSON.stringify()，不是“解析” - 真有动态 JSON 配置加载需求（比如从 URL 加载表单 schema），那属于初始化阶段，用一次
fetch+response.json()就够了
实际最常卡住的地方，是以为表单提交天然支持 JSON 流程，结果发现响应根本没进 JS 回调——因为没拦住默认提交，或者后端返回的压根不是 JSON。