AJAX

AJAX JSON 实例

作者likuolei 2025年7月29日

下面是一个简单的 AJAX 请求 JSON 数据的实例，使用原生 JavaScript 和 jQuery 两种方式都展示一下，便于理解。

✅ 一、原生 JavaScript 实现（使用 `XMLHttpRequest`）

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>AJAX JSON 示例</title>
</head>
<body>
  <h2>用户信息：</h2>
  <div id="user"></div>

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

    // 配置请求类型和URL
    xhr.open("GET", "user.json", true); // 请求本地 JSON 文件

    // 设置回调
    xhr.onload = function () {
      if (xhr.status === 200) {
        // 解析 JSON 数据
        var data = JSON.parse(xhr.responseText);
        document.getElementById("user").innerHTML =
          "姓名：" + data.name + "<br>年龄：" + data.age;
      }
    };

    // 发送请求
    xhr.send();
  </script>
</body>
</html>

示例 JSON 文件（user.json）：

{
  "name": "张三",
  "age": 28
}

✅ 二、使用 jQuery 实现

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>jQuery AJAX JSON 示例</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <h2>用户信息：</h2>
  <div id="user"></div>

  <script>
    $.getJSON("user.json", function(data) {
      $("#user").html("姓名：" + data.name + "<br>年龄：" + data.age);
    });
  </script>
</body>
</html>

📝 注意事项：

本示例中使用了本地 JSON 文件（user.json），在浏览器中直接打开 HTML 可能无法加载（因浏览器限制）。建议放在本地服务器（如 VSCode 的 Live Server、Python SimpleHTTPServer 等）中测试。
AJAX 请求跨域时需要服务器支持 CORS。
jQuery 的 .getJSON() 会自动将响应解析为 JSON。

如需进一步展示 POST 请求或从后端接口获取数据，也可以告诉我，我来补充更完整的例子。

发表回复取消回复