前端笔记9——通过for循环将JSON数组渲染到表格中

最新推荐文章于 2024-09-19 17:31:29 发布

Shaoxi Zhang

最新推荐文章于 2024-09-19 17:31:29 发布

阅读量1.7k

点赞数 2

分类专栏：前端文章标签： javascript

本文链接：https://blog.csdn.net/weixin_42844704/article/details/124360080

版权

前端专栏收录该内容

10 篇文章 0 订阅

订阅专栏

这篇博客展示了如何通过使用原生Ajax从Node.js后端获取JSON数据，并将其动态渲染到前端HTML表格中。具体步骤包括设置Express路由以返回JSON数据，以及在JavaScript中创建XMLHttpRequest对象、发送GET请求、解析响应并遍历JSON数组来更新表格内容。

摘要由CSDN通过智能技术生成

目标：

先看最终效果：
在这里插入图片描述
表格中的数据来源于后端。

代码：

node.js(express框架）部分代码：
（如果这部分基础有问题，请看我前面的笔记：）

app.all('/json3',(request,response)=>{
    //设置响应头 设置允许跨域
    response.setHeader('Access-Control-Allow-Origin','*');
    response.setHeader('Access-Control-Allow-Headers','*');
    const data=[
        {id:'001',name:'李四',grade:'二年级',school:'东莞中学'},
        {id:'002',name:'猪八戒',grade:'三年级',school:'黄冈中学'},
        {id:'003',name:'孙悟空',grade:'五年级',school:'清华中学'}
    ]
        
    let str=JSON.stringify(data);
    //设置响应体
    response.send(str);
});

前端代码：

<!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>将JSON数组渲染到表格中</title>
</head>
<body>
    <h3>练习目标：通过原生ajax,将JSON数组渲染到表格中</h3>
    <h5>方法：用for循环遍历数组，然后将内容加到tbody中</h5>
    
   <!-- 有结构标签的表格 -->
   表格结构标签：thead 表格头不；tbody表格主题；tfoot表格底部。
   <table border="1" width="300" height="100">
       <caption><strong>学生信息表</strong></caption>
       <thead>
           <tr>
               <th>学号</th>
               <th>姓名</th>
               <th>班级</th>
               <th>学校</th>
           </tr>
       </thead>
       <tbody id="students">
       </tbody>
       <tfoot>
       </tfoot>
   </table>
</br>
    <script>    
        console.log('start...');
        window.onload=function(){
            //1.创建对象
            const xhr=new XMLHttpRequest();
            // xhr.responseType="json";
            //2.初始化 设置类型于URL
            xhr.open('GET','http://127.0.0.1:8111/json3');          
            //3.发送
            xhr.send();
            //4.事件绑定
            xhr.onreadystatechange=function(){
                //判断
                if (xhr.readyState===4){
                    if(xhr.status>=200&& xhr.status<300){
                        //处理服务端返回的结果
                        // console.log(xhr.response);
                        //let str=JSON.parse(xhr.response);
                        //console.log(str);
                        arr=JSON.parse(xhr.response);
                        console.log(arr);
                        for(v=i=0; i<arr.length;i++){
                            students.innerHTML+="<tr><td>"+arr[i].id+"</td><td>"+arr[i].name+
                                "</td><td>"+arr[i].grade+"</td><td>"+arr[i].school+"</td></tr>";
                        }

                    }
                }
            }
        }

    </script>
</body>
</html>