如何在 JavaScript 中使用 POST 发送 JSON

在前端开发中，我们经常需要使用 AJAX 发送数据到后端。其中一种常用的数据格式是 JSON。

那么在 JavaScript 中如何使用 POST 发送 JSON 呢？接下来我们将介绍详细的步骤和示例代码。

使用 XMLHttpRequest 对象发送 POST 请求

发送 POST 请求通常需要使用 XMLHttpRequest（简称XHR）对象。该对象提供了一种在不刷新页面的情况下从服务器获取数据的方法。

以下是一个使用 XHR 对象发送 POST 请求并接收 JSON 返回值的示例代码：

const xhr = new XMLHttpRequest();
const url = "/api/user";

xhr.open("POST", url, true);
xhr.setRequestHeader("Content-Type", "application/json");

xhr.onreadystatechange = function() {
  if (xhr.readyState === XMLHttpRequest.DONE) {
    if (xhr.status === 200) {
      const response = JSON.parse(xhr.responseText);
      console.log("response", response);
    } else {
      console.error("Error: ", xhr.status);
    }
  }
};

const data = {
  username: "john.doe",
  password: "123456"
};

xhr.send(JSON.stringify(data));

解释：

• 首先，创建一个 XHR 对象并指定请求的 URL。
• 使用 open() 方法初始化请求参数。第一个参数是请求的方法（"POST" 或 "GET" 等），第二个参数是 API 的 URL，第三个参数是一个布尔值，代表请求是否异步处理。
• 通过设置 setRequestHeader() 方法来告诉服务器发送的数据是 JSON 类型。
• 在 onreadystatechange() 事件处理程序中，检查 XHR 对象的 readyState 和 status 属性来判断请求是否成功。
• 最后，使用 JSON.stringify() 方法将数据转换为 JSON 字符串，并通过 send() 方法发送到服务器。

使用 Fetch API 发送 POST 请求

另一种发送 POST 请求的方法是使用 Fetch API。该 API 提供了一种更现代化、更简单的方式来处理 AJAX 请求。

以下是一个使用 Fetch API 发送 POST 请求并接收 JSON 返回值的示例代码：

const url = "/api/user";

const data = {
  username: "john.doe",
  password: "123456"
};

const options = {
  method: "POST",
  headers: {
    "Content-Type": "application/json"
  },
  body: JSON.stringify(data)
};

fetch(url, options)
  .then(response => response.json())
  .then(data => console.log("data", data))
  .catch(error => console.error("Error: ", error));

解释：

• 首先，定义 API 的 URL 和请求的数据。
• 创建一个 options 对象，该对象包含请求的方法、请求头和请求体。
• 使用 fetch() 方法发送请求并传递 options 对象。
• 在 .then() 方法中，使用 json() 方法解析服务器响应的 JSON 数据。
• 最后，使用 .catch() 方法来处理请求出错的情况。

结语

以上就是在 JavaScript 中发送 POST 请求并接收 JSON 返回值的两种常用方法。无论使用哪种方式，您都需要对服务器设置正确的响应头（Content-Type: application/json），以便正确解析请求体中的 JSON 数据。

Happy coding! 🎉