Javascript 使用 AJAX 发送帖子数据

在 Web 开发中，我们经常需要通过 AJAX 发送数据给后端服务器，以更新数据或提交表单。本文将介绍如何使用 JavaScript 中的 AJAX 发送帖子数据。

AJAX 简介

AJAX 是 Asynchronous JavaScript and XML 的缩写，即异步 JavaScript 和 XML。它允许在不刷新整个页面的情况下发送和接收数据。AJAX 基于 XMLHttpRequest 对象，它通过在后台与服务器交换数据，在不干扰页面的前提下更新页面内容。

发送 POST 请求

使用 AJAX 发送 POST 请求，可以将数据发送到后端服务器。以下是一个示例：

const xhr = new XMLHttpRequest();
xhr.open('POST', '/post', true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onreadystatechange = function() {
  if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
    console.log(xhr.responseText);
  }
};
xhr.send(JSON.stringify({ title: 'My post', body: 'This is my post.' }));

上面代码中，我们使用 XMLHttpRequest 对象创建一个 POST 请求。xhr.open() 方法接受三个参数：

• 请求方法，即'POST'。
• 请求 URL，即后端服务器的 URL 地址。
• 是否异步发送请求，即 true。

然后，我们使用 xhr.setRequestHeader() 方法设置请求头，它接受两个参数：

• 请求头名称，即'Content-Type'。
• 请求头内容，即发送数据的 MIME 类型。

接着，我们使用 xhr.onreadystatechange() 方法检测 AJAX 请求状态、响应状态和响应内容。在这个示例中，我们只在请求完成和响应状态为 200 时打印响应内容。

最后，我们使用 xhr.send() 方法发送请求数据。在这个示例中，我们将发送一个 JSON 对象。

注意事项

在发送 POST 请求时，需要注意以下几点：

• 可以通过设置请求头来指定发送数据的格式。如示例中的 JSON 格式。
• 此处使用的是原生 JavaScript 的 AJAX 请求。如果你使用的是框架，如 React 或 Vue，它们也提供了 AJAX 请求的封装。