JavaScript 中怎么使用 Fetch API 发送携带 JSON 数据的 POST 请求-js教程-PHP中文网

用fetch发送json post请求需设content-type为application/json且body必须是json.stringify()生成的字符串；常见错误包括漏设headers、body传对象或json.stringify()语法错误。

javascript 中怎么使用 fetch api 发送携带 json 数据的 post 请求

用 Fetch 发送 JSON POST 请求，核心是两件事：设置 Content-Type 为 application/json，并把 JavaScript 对象用 JSON.stringify() 转成字符串再传给 body。

基础写法：最简可用示例

这是发送 JSON 数据的标准结构：

fetch('/api/login', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    username: 'alice',
    password: '123456'
  })
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('请求失败:', error));

注意 headers 和 body 的配合关系

必须同时满足以下三点，后端才能正确解析 JSON：

dmap-jsapi-skill

DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。

下载

headers 中声明 'Content-Type': 'application/json' —— 告诉服务器“我发的是 JSON”
body 必须是字符串，不能是对象 —— 直接传对象会变成 [object Object]，后端收不到字段
用 JSON.stringify() 转换数据 —— 这是生成合法 JSON 字符串的唯一可靠方式

常见错误和避坑点

这些写法看似差不多，但实际会失败：

❌ 错误：没设 headers 或写错 Content-Type（比如写成 text/json） —— 后端可能按表单解析，字段为空
❌ 错误：body 直接传对象 {username: 'a'} —— Fetch 会调用对象的 toString()，结果是 [object Object]
❌ 错误：body 用 JSON.stringify() 但漏了引号，比如写成 JSON.stringify({username: a}) —— 变量 a 未定义，报语法错误

进阶建议：封装成可复用函数

避免每次重复写 headers 和错误处理，可以简单封装：

async function postJson(url, data) {
  const response = await fetch(url, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(data)
  });
  if (!response.ok) throw new Error(`HTTP ${response.status}`);
  return response.json();
}

// 使用
postJson('/api/users', { name: 'Bob', email: 'bob@example.com' })
  .then(console.log)
  .catch(console.error);