JSON 让你重新理解前后端交互

前端

2023-09-14 11:37:05

掌握 JSON，轻松获取 POST 请求数据

在前后端交互中，获取 POST 请求的 body 内容至关重要。JSON（JavaScript 对象表示法）作为一种轻量级的数据交换格式，在这一场景中大放异彩。通过 JSON，我们可以轻松地将数据从前端传递到后端，并进行解析和使用。

JSON 的优势

JSON 拥有众多优点，使其成为前后端交互的理想选择：

简单性： JSON 使用基于 JavaScript 对象的文本表示，简单易懂，方便机器和人进行数据交换。
轻量性： JSON 数据非常紧凑，传输效率高，可以节省网络带宽和资源。
通用性： JSON 被大多数编程语言和平台支持，可以在不同的系统和设备之间轻松交换数据。
可扩展性： JSON 支持任意复杂的对象结构，可以灵活地表示各种类型的数据。

获取 POST 请求的 body 内容

使用 JSON 获取 POST 请求的 body 内容是一个简单的两步过程：

1. 前端

使用 JavaScript 的 fetch() 函数发送 POST 请求。
在请求的 body 中，使用 JSON.stringify() 方法将数据对象转换为 JSON 字符串。
设置请求头 "Content-Type: application/json"，告知后端接收的是 JSON 数据。

2. 后端

使用 Express.js 等框架来解析请求。
在路由处理函数中，使用 request.body 来获取 POST 请求的 body。
使用 JSON.parse() 方法将 body 中的 JSON 字符串转换为 JavaScript 对象。

代码示例

前端（JavaScript）

fetch("/api/endpoint", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    name: "John Doe",
    age: 30,
  }),
})
.then((response) => response.json())
.then((data) => {
  console.log(data);
});

后端（Node.js）

const express = require("express");

const app = express();

app.post("/api/endpoint", (req, res) => {
  const data = req.body;

  console.log(data);

  res.json({
    message: "Data received successfully",
  });
});

app.listen(3000, () => {
  console.log("Server listening on port 3000");
});