下面是一个 AJAX JSON 实例，展示了如何使用 AJAX 向服务器发送请求，获取 JSON 数据 并在前端处理这些数据。

1. 简单的 AJAX JSON 实例

前端 (HTML + JavaScript + AJAX)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AJAX JSON 示例</title>
</head>
<body>

    <h2>AJAX 获取 JSON 数据</h2>
    <button id="loadButton">加载数据</button>
    <div id="responseContainer"></div>

    <script>
        // 获取按钮和响应容器元素
        var button = document.getElementById("loadButton");
        var responseContainer = document.getElementById("responseContainer");

        // 为按钮添加点击事件监听器
        button.addEventListener("click", function() {
            // 创建 XMLHttpRequest 对象
            var xhr = new XMLHttpRequest();
            
            // 配置 GET 请求，指向 server.php
            xhr.open("GET", "server.php", true);
            
            // 设置响应处理函数
            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    // 解析返回的 JSON 数据
                    var data = JSON.parse(xhr.responseText);

                    // 构建输出内容
                    var output = "<h3>服务器响应:</h3>";
                    output += "<p>Message: " + data.message + "</p>";
                    output += "<p>Timestamp: " + data.timestamp + "</p>";
                    
                    // 将输出内容插入到页面中
                    responseContainer.innerHTML = output;
                }
            };
            
            // 发送请求
            xhr.send();
        });
    </script>

</body>
</html>

后端 (PHP – server.php)

<?php
// 模拟从服务器获取数据
$data = array(
    "message" => "Hello, this is a response from the server!",
    "timestamp" => date("Y-m-d H:i:s")
);

// 将数据转为 JSON 格式并返回
echo json_encode($data);
?>

2. 说明

  1. 前端：
    • 当用户点击 “加载数据” 按钮时，页面通过 AJAX 向 server.php 发送一个 GET 请求。
    • 请求成功后，服务器返回一个 JSON 格式 的响应数据。
    • 在 JavaScript 中，我们通过 JSON.parse() 将 JSON 数据 解析为 JavaScript 对象，然后将这些数据动态展示在页面上。
  2. 后端 (PHP)：
    • server.php 通过 json_encode() 将一个 PHP 数组转化为 JSON 格式，并返回给前端。
    • 在实际应用中，后端可以进行数据库操作、文件处理或其他复杂操作，并将结果以 JSON 格式返回给前端。

3. 执行流程

  1. 用户点击页面上的 “加载数据” 按钮。
  2. 前端通过 AJAX 向服务器的 server.php 发送请求。
  3. 服务器返回 JSON 格式 的响应数据，包括一条消息和时间戳。
  4. 前端通过 JSON.parse() 解析返回的 JSON 数据，获取 message 和 timestamp 字段，并将它们显示在网页上。

4. 结果

当点击按钮后，页面将显示从服务器获取到的消息和时间戳。

例如，页面可能显示如下：

服务器响应:
Message: Hello, this is a response from the server!
Timestamp: 2025-02-21 14:30:00

5. 扩展功能

你可以通过 AJAX POST 请求 向服务器发送 JSON 数据，例如在表单提交时，将数据发送到后端并返回响应。

前端 (发送 JSON 数据)

// 创建 XMLHttpRequest 对象
var xhr = new XMLHttpRequest();

// 创建发送的 JSON 数据
var jsonData = JSON.stringify({
    name: "John Doe",
    email: "johndoe@example.com"
});

// 配置 POST 请求，指向 server.php
xhr.open("POST", "processForm.php", true);
xhr.setRequestHeader("Content-Type", "application/json");

// 处理响应
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        console.log(xhr.responseText); // 服务器返回的响应
    }
};

// 发送请求
xhr.send(jsonData);

后端 (PHP – processForm.php)

<?php
// 获取 POST 请求的原始 JSON 数据
$inputData = json_decode(file_get_contents("php://input"), true);

// 获取数据
$name = $inputData['name'];
$email = $inputData['email'];

// 处理数据（例如，插入数据库等）
echo "收到的数据: Name - $name, Email - $email";
?>

总结

  • AJAX 获取 JSON 数据：前端通过 AJAX 发送请求，获取 JSON 格式 数据，并通过 JSON.parse() 解析数据。
  • AJAX 发送 JSON 数据：前端也可以将 JSON 格式 的数据发送给服务器，通过 JSON.stringify() 转换为 JSON 字符串发送。
  • 服务器端处理：后端可以使用适当的技术（如 PHP、Node.js、Python 等）处理 JSON 请求 和响应。

使用 AJAX 和 JSON 可以让你实现更加动态、响应快速的 Web 应用，使得前后端的交互更加高效和灵活。