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