HTML表单提交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": []}，后端是忽略、清空还是报错，得提前对齐，不然调试时根本看不出问题在哪。

今天关于《HTML表单提交JSON数据方法》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！