JavaScript Academy · 课时

POST 与发送数据

Q: 「POST 与发送数据」这节课中我会学到什么？

使用请求选项发送 JSON 数据。 你通过在浏览器中直接运行的动手代码来练习 JavaScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

使用请求选项发送 JSON 数据。

POST 与发送数据 是 CoddyKit 上的免费 JavaScript Academy 课时。这是第 2 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 JavaScript Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 JavaScript Academy 课程共包含 4 节课。

向服务器发送数据

要创建或更新数据，需要发送带有正文的请求。Fetch 可以通过作为第二个参数传入的选项对象支持这一点。

设置方法

将 method 设置为所需的 HTTP 动词：使用 POST 创建，使用 PUT/PATCH 更新，使用 DELETE 移除。

fetch(url, { method: "POST" });

添加 JSON 正文

大多数 API 都需要 JSON。使用 JSON.stringify 将对象转换为字符串，并将其放入 body 中。

fetch(url, {
  method: "POST",
  body: JSON.stringify({ name: "Ada", age: 36 })
});

Content-Type 标头

设置 Content-Type: application/json，告诉服务器正文是 JSON。没有它，服务器可能会错误地解析负载。

fetch(url, {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ name: "Ada" })
});

读取响应

服务器通常会回复创建的资源。请像读取 GET 响应一样，使用 response.json() 读取它。

const response = await fetch(url, {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify(payload)
});
const created = await response.json();

完整的创建函数

请将此模式封装为可复用的函数。它接收数据、发送数据，并返回服务器响应。

async function createUser(data) {
  const res = await fetch("/api/users", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(data)
  });
  return res.json();
}

PUT 和 PATCH

使用 PUT 完全替换资源，使用 PATCH 仅更新部分字段。相应地，请求体的结构也有所不同。

fetch("/api/users/7", {
  method: "PATCH",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ age: 37 })
});

发送表单数据

对于文件上传或表单提交，请使用 FormData 对象作为请求体。请勿（NOT）自行设置内容类型；浏览器会添加正确的多部分边界。

const form = new FormData();
form.append("avatar", fileInput.files[0]);
fetch("/upload", { method: "POST", body: form });

身份验证

受保护的端点需要凭据。请在授权标头中发送令牌，并同时设置内容类型。

fetch(url, {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
    "Authorization": "Bearer " + token
  },
  body: JSON.stringify(data)
});

Cookie 和凭据

默认情况下，fetch 不会跨来源发送 Cookie。当服务器使用基于 Cookie 的会话时，请设置 credentials: "include"。

fetch(url, { method: "POST", credentials: "include", body: payload });

字符串化的陷阱

请记住：body 必须是字符串（或 FormData/Blob）。传入 raw 对象会发送 [object Object]。请始终先对对象执行 JSON.stringify。

body: JSON.stringify({ ok: true }) // correct
// body: { ok: true }  <-- broken

快速检查

使用 POST 发送 JSON。

回顾

通过设置 method、body 和标头来发送数据。对于 JSON，请对对象执行 JSON.stringify，并设置 Content-Type: application/json。上传文件时使用 FormData（不要手动设置内容类型），进行身份验证时添加 Authorization，使用 Cookie 时设置 credentials: "include"。使用 response.json() 读取响应。

常见问题解答

「POST 与发送数据」课时是免费的吗？

是的 — 「POST 与发送数据」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 JavaScript Academy 课程的其余内容，请升级到 CoddyKit PRO。 JavaScript Academy 课程共包含 4 节课。

「POST 与发送数据」这节课中我会学到什么？

使用请求选项发送 JSON 数据。你通过在浏览器中直接运行的动手代码来练习 JavaScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 JavaScript Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 JavaScript Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 2 节课，共 4 节。

「POST 与发送数据」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 JavaScript Academy 课中编写并运行代码吗？

能。每节 JavaScript Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 JavaScript Academy