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 关于#matlab#的问题:在模糊控制器中选出线路信息,在simulink中根据线路信息生成速度时间目标曲线(初速度为20m/s,15秒后减为0的速度时间图像)我想问线路信息是什么
  • ¥15 banner广告展示设置多少时间不怎么会消耗用户价值
  • ¥16 mybatis的代理对象无法通过@Autowired装填
  • ¥15 可见光定位matlab仿真
  • ¥15 arduino 四自由度机械臂
  • ¥15 wordpress 产品图片 GIF 没法显示
  • ¥15 求三国群英传pl国战时间的修改方法
  • ¥15 matlab代码代写,需写出详细代码,代价私
  • ¥15 ROS系统搭建请教(跨境电商用途)
  • ¥15 AIC3204的示例代码有吗,想用AIC3204测量血氧,找不到相关的代码。