Ajax使用JSON数据格式案例

Ajax使用JSON数据格式案例攻略

什么是Ajax？

Ajax 指的是 Asynchronous JavaScript 和 XML（异步的 JavaScript 和 XML）。

Ajax 是一种用于创建快速动态网页的技术，可以在不需要重新加载整个页面的情况下，通过后台异步请求数据，并更新部分页面内容。

什么是JSON？

JSON（JavaScript Object Notation，JavaScript 对象表示法）是一种轻量级的数据交换格式，常用于将数据从服务端传递到客户端。

JSON 数据格式由键值对组成，键必须是字符串，值可以是字符串、数字、布尔值、数组、对象等数据类型。

JSON 数据格式的示例：

{
    "name": "张三",
    "age": 20,
    "gender": "男",
    "hobbies": ["篮球", "游泳", "旅游"],
    "address": {
        "province": "广东省",
        "city": "广州市"
    }
}

Ajax使用JSON数据格式案例1

下面是一个简单的使用 Ajax 加载 JSON 数据的示例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Ajax使用JSON格式数据示例</title>
</head>
<body>
    <button onclick="loadJSON()">加载JSON数据</button>
    <div id="result"></div>

    <script>
        function loadJSON() {
            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    var data = JSON.parse(xhr.responseText);
                    var result = document.getElementById("result");
                    result.innerHTML = "姓名：" + data.name + "<br>" +
                                       "年龄：" + data.age + "<br>" +
                                       "性别：" + data.gender + "<br>" +
                                       "爱好：" + data.hobbies.join(", ") + "<br>" +
                                       "地址：" + data.address.province + data.address.city;
                }
            };
            xhr.open("GET", "data.json", true);
            xhr.send();
        }
    </script>
</body>
</html>

这个示例中，当用户点击“加载JSON数据”按钮时，会使用 Ajax 发送 GET 请求，请求服务器上的 data.json 文件，得到响应后将响应数据解析为 JSON 格式的对象，然后将数据显示在 id 为“result”的 div 标签中。

Ajax使用JSON数据格式案例2

下面是另一个使用 Ajax 加载 JSON 数据的示例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Ajax使用JSON格式数据示例</title>
</head>
<body>
    <button onclick="loadJSON()">加载JSON数据</button>
    <ul id="result"></ul>

    <script>
        function loadJSON() {
            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    var data = JSON.parse(xhr.responseText);
                    var result = document.getElementById("result");
                    data.forEach(function (item) {
                        var li = document.createElement("li");
                        li.innerHTML = "姓名：" + item.name + "&nbsp;&nbsp;年龄：" + item.age;
                        result.appendChild(li);
                    });
                }
            };
            xhr.open("GET", "data.json", true);
            xhr.send();
        }
    </script>
</body>
</html>

这个示例中，当用户点击“加载JSON数据”按钮时，会使用 Ajax 发送 GET 请求，请求服务器上的 data.json 文件，得到响应后将响应数据解析为 JSON 格式的数组对象，然后将数据以列表的形式显示在 id 为“result”的 ul 标签中。

总结

Ajax 使用 JSON 数据格式可以非常方便地从服务端获取数据并更新部分页面内容，可以应用于很多场合，例如：后台管理系统、在线商城、社交网站等。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：Ajax使用JSON数据格式案例 - Python技术站