Ajax请求json数据demo

最新推荐文章于 2023-12-13 16:29:44 发布

hr226

最新推荐文章于 2023-12-13 16:29:44 发布

阅读量278

点赞数 1

分类专栏： demo 文章标签： Ajax请求json数据demo

本文链接：https://blog.csdn.net/hr226/article/details/100750892

版权

demo 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

ajax2.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Ajax 2 - 请求JSON数据</title>
</head>

<body>
    <button id="button1">请求单个用户</button>
    <button id="button2">请求所有用户</button>

    <br><br>

    <h1>单个用户</h1>
    <div id="user"></div>

    <h1>所有用户</h1>
    <div id="users"></div>

    <script>
        document.getElementById('button1').addEventListener('click', loadUser);
        document.getElementById('button2').addEventListener('click', loadUsers);

        // 单个用户
        function loadUser() {
            var xhr = new XMLHttpRequest();
            xhr.open('GET', 'user.json', true);
            xhr.onload = function() {
                if (this.status == 200) {
                    // console.log(this.responseText);
                    // JSON.parse()把json数据解析
                    var user = JSON.parse(this.responseText);
                    // console.log(user.name);

                    var output = '';
                    // es6 语法  `` 模板
                    output += `
                      <ul>
                        <li>${user.id}</li>
                        <li>${user.name}</li>
                        <li>${user.email}</li>
                      </ul>
                    `;

                    document.getElementById('user').innerHTML = output;
                }
            }
            xhr.send();
        }

        // 所有用户
        function loadUsers() {
            var xhr = new XMLHttpRequest();
            xhr.open('GET', 'users.json', true);
            xhr.onload = function() {
                if (this.status == 200) {
                    var users = JSON.parse(this.responseText);

                    var output = '';

                    // 遍历数组
                    for (var i in users) {
                        output += `
                          <ul>
                            <li>${users[i].id}</li>
                            <li>${users[i].name}</li>
                            <li>${users[i].email}</li>
                          </ul>
                        `;
                    }

                    document.getElementById('users').innerHTML = output;
                }
            }
            xhr.send();
        }
    </script>
</body>

</html>

user.json 请求一个数据

{
    "id": 1,
    "name": "hr226",
    "email": "2108123704@qq.com"
}

users.json 请求多个数据

[
	{
        "id": 1,
        "name": "小猪佩奇",
        "email": "2108123704@qq.com"
    },
    {
        "id": 2,
        "name": "喜洋洋与灰太狼",
        "email": "hrong364@gmail.com"
    },
    {
        "id": 3,
        "name": "三只松鼠",
        "email": "2108123704@qq.com"
    }
]

hr226

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax请求json数据demo

ajax2.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Ajax 2 - 请求JSON数据</title></head><body> <button id="b...
复制链接

扫一扫