lowlylove 2022-03-23 21:05 采纳率: 62.5%
浏览 120
已结题

利用async和await关键字,将txt格式改为Json格式,并渲染到列表中

怎样Json放在script的代码里,并渲染到列表(请求数据的代码最好可以放在script的if里面)
data.txt改为Students.json,代码如下:

[
    {
        "number":"20180101",
        "name":"小格",
        "age":18
    },
    {
        "number":"20180102",
        "name":"小莱",
        "age":19
    },
    {
        "number":"20180103",
        "name":"小璐",
        "age":20
    }
]

页面代码如下:


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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button id="btn"> 获取学生数据</button>
    <table>
        <caption>学生信息表</caption>
        <thead>
            <tr>
                <th>学号</th>
                <th>姓名</th>
                <th>年龄</th>
            </tr>
        </thead>
        <tbody>
            <!-- 通过js设置innerHTML显示数据 -->
        </tbody>
    </table>
</body>

</html>
<script>
    // ajax请求的基础:请求的地址,请求的方式
    async function getData(url, method = 'GET') {
        let result = await new Promise((resolve, rejected) => {
            // 建立请求,并获取数据
            // 建立请求的对象
            const xht = new XMLHttpRequest();
            // 建立连接
            xht.open(method, url, true);
            // 发送数据请求
            xht.send(null);
            // 判断请求的状态
            xht.onreadystatechange = function() {
                // 判断请求的过程进行到哪一步
                if (xht.readyState == 4) {
                    if (xht.status == 200) {
                        // 说明请求和数据以及拿到
                        resolve(xht.responseText);

                    } else {
                        rejected('服务器连接失败');
                    }
                }
            }
        });
        console.log(result);
        // 将数据渲染到页面
    }

    // 调用分装异步请求的数据
    getData('data.txt');
</script>
  • 写回答

3条回答 默认 最新

  • 你好!机器人 2022-03-24 21:15
    关注
    
     
    <!DOCTYPE html>
    <html lang="en">
     
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
     
    <body>
        <button id="btn"> 获取学生数据</button>
        <table>
            <caption>学生信息表</caption>
            <thead>
                <tr>
                    <th>学号</th>
                    <th>姓名</th>
                    <th>年龄</th>
                </tr>
            </thead>
            <tbody>
                <!-- 通过js设置innerHTML显示数据 -->
            </tbody>
        </table>
    </body>
     
    </html>
    <script>
        // ajax请求的基础:请求的地址,请求的方式
        async function getData(url, method = 'GET') {
            let result = await new Promise((resolve, rejected) => {
                // 建立请求,并获取数据
                // 建立请求的对象
                const xht = new XMLHttpRequest();
                // 建立连接
                xht.open(method, url, true);
                // 发送数据请求
                xht.send(null);
                // 判断请求的状态
                xht.onreadystatechange = function() {
                    // 判断请求的过程进行到哪一步
                    if (xht.readyState == 4) {
                        if (xht.status == 200) {
                            // 说明请求和数据以及拿到
                            resolve(xht.responseText);
     
                        } else {
                            rejected('服务器连接失败');
                        }
                    }
                }
            });
            let html = ''
            const data = JSON.parse(result)
            data.forEach(item=>{
                html+=`<tr><td>${item.number}</td><td>${item.name}</td><td>${item.age}</td></tr>`
            })
            document.getElementsByTagName('tbody')[0].innerHTML = html
            // console.log(result);
            // 将数据渲染到页面
        }
     
        // 调用分装异步请求的数据
        getData('data.json');
    </script>
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题?

问题事件

  • 系统已结题 4月1日
  • 已采纳回答 3月24日
  • 修改了问题 3月24日
  • 修改了问题 3月24日
  • 展开全部

悬赏问题

  • ¥15 Todesk 远程写代码 anaconda jupyter python3
  • ¥15 我的R语言提示去除连锁不平衡时clump_data报错,图片以下所示,卡了好几天了,苦恼不知道如何解决,有人帮我看看怎么解决吗?
  • ¥15 在获取boss直聘的聊天的时候只能获取到前40条聊天数据
  • ¥20 关于URL获取的参数,无法执行二选一查询
  • ¥15 液位控制,当液位超过高限时常开触点59闭合,直到液位低于低限时,断开
  • ¥15 marlin编译错误,如何解决?
  • ¥15 有偿四位数,节约算法和扫描算法
  • ¥15 VUE项目怎么运行,系统打不开
  • ¥50 pointpillars等目标检测算法怎么融合注意力机制
  • ¥20 Vs code Mac系统 PHP Debug调试环境配置