Ajax Post 变量值 - JavaScript

当我们使用 Ajax（Asynchronous JavaScript and XML）通过 JavaScript 发送 POST 请求时，我们经常需要传递一些变量值。在本文中，我们将介绍如何在 JavaScript 中使用 Ajax 发送 POST 请求并传递变量值。

1. 创建 XMLHttpRequest 对象

首先，我们需要创建一个 XMLHttpRequest 对象。该对象用于向服务器发送请求和获取服务器的响应。

var xhr = new XMLHttpRequest();

2. 设置请求方法和 URL

接下来，我们需要设置请求的方法和 URL。

xhr.open("POST", "http://example.com/api", true);

在这里，我们使用 open() 方法设置请求方法为 POST，并指定请求的 URL。第三个参数为是否异步发送请求，设置为 true 表示异步发送请求，设置为 false 表示同步发送请求。

3. 设置请求头和发送数据

我们可以通过设置请求头发送数据和告诉服务器数据的类型。一般情况下，我们使用 setRequestHeader() 方法设置请求头的内容。

xhr.setRequestHeader("Content-Type", "application/json");

上述示例中，我们设置请求头的 Content-Type 为 application/json，表示发送的数据是 JSON 格式。

发送数据的方式有多种，如通过 URL 参数传递数据、通过 FormData 对象传递表单数据等。下面我们使用 JSON 格式的数据作为示例。

var data = {
  name: "John",
  age: 25
};

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

在这里，我们使用 JSON.stringify() 方法将 JavaScript 对象转换为 JSON 字符串，并通过 send() 方法发送数据到服务器。

4. 监听服务器响应

为了获取服务器的响应，我们需要监听 xhr 对象的状态变化和响应事件。

xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    var response = JSON.parse(xhr.responseText);
    console.log(response);
  }
};

在这里，我们通过监听 xhr 对象的 onreadystatechange 事件，在 readyState 变为 4（表示请求已完成）并且 status 为 200（表示请求成功）时处理服务器的响应。我们通过 JSON.parse() 方法将服务器返回的 JSON 字符串转换为 JavaScript 对象，并将其打印到控制台。

完整示例

下面是一个完整的示例，展示了如何使用 Ajax 发送 POST 请求并传递变量值。

var xhr = new XMLHttpRequest();
xhr.open("POST", "http://example.com/api", true);
xhr.setRequestHeader("Content-Type", "application/json");

var data = {
  name: "John",
  age: 25
};

xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    var response = JSON.parse(xhr.responseText);
    console.log(response);
  }
};

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

以上就是使用 Ajax 发送 POST 请求并传递变量值的方法。通过这种方式，我们可以与服务器进行交互并传递数据，实现动态的网页内容更新。

请注意，以上示例中的 URL 和数据是示意性的，你需要根据实际情况修改为所需的 URL 和数据。

希望这篇文章对你有所帮助！