石家庄人才网今天给大家分享《ajax发送json数据实例》，石家庄人才网小编对内容进行了深度展开编辑，希望通过本文能为您带来解惑。

在前后端分离的开发模式中，前端页面需要通过 Ajax 向服务器发送异步请求，并将数据以 JSON 格式进行传输。本文将介绍使用 Ajax 发送 JSON 数据的实例，并提供详细的代码和解释。

1. 创建 Ajax 请求

首先，我们需要使用 JavaScript 创建一个 XMLHttpRequest 对象，该对象用于发送 Ajax 请求。可以使用以下代码创建一个 XMLHttpRequest 对象：

```var xhr = new XMLHttpRequest();```

2. 设置请求方法和 URL

接下来，我们需要设置请求的方法和 URL。可以使用 `open()` 方法来设置请求方法和 URL。例如，要发送一个 POST 请求到 `http://example.com/api/data`，可以使用以下代码：

```xhr.open('POST', 'http://example.com/api/data');```

3. 设置请求头

为了发送 JSON 数据，我们需要设置请求头中的 `Content-Type` 为 `application/json`。可以使用 `setRequestHeader()` 方法来设置请求头。例如：

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

4. 发送 JSON 数据

现在我们可以使用 `send()` 方法发送 JSON 数据了。在发送数据之前，我们需要将 JSON 对象转换为字符串。可以使用 `JSON.stringify()` 方法将 JSON 对象转换为字符串。例如：

```var data = { name: 'John Doe', age: 30 };var jsonData = JSON.stringify(data);xhr.send(jsonData);```

5. 处理响应

当服务器响应请求时，我们可以使用 `onreadystatechange` 事件处理程序来处理响应。在事件处理程序中，我们可以检查响应的状态码和数据。例如：

```xhr.onreadystatechange = function() { if (this.readyState === 4 && this.status === 200) { // 请求成功，处理响应数据 var response = JSON.parse(this.responseText); console.log(response); }};```

完整实例

以下是一个完整的 Ajax 发送 JSON 数据的实例：

```var data = { name: 'John Doe', age: 30 };var jsonData = JSON.stringify(data);

var xhr = new XMLHttpRequest();xhr.open('POST', 'http://example.com/api/data');xhr.setRequestHeader('Content-Type', 'application/json');xhr.onreadystatechange = function() { if (this.readyState === 4 && this.status === 200) { var response = JSON.parse(this.responseText); console.log(response); }};xhr.send(jsonData);```

石家庄人才网小编对《ajax发送json数据实例》内容分享到这里，如果有相关疑问请在本站留言。