Ajax读取Json文件进行数据渲染

迈不过友情╰ 2022-05-16 11:43 314阅读 0赞

## 前言 ##

昨天偶然在自己电脑上翻到一家在长沙的小公司给的笔试题，有个题是关于前端的，当时主要应聘岗位是Java后端开发，所以当时对前端知识不熟悉，只会一点HTML+CSS+JS的基础知识。最近有学习Ajax+JS+Jquery的相关知识，再看这道题，考察的是挺简单的页面渲染，练练手还是不错的，在实现的过程中，还是遇到了很多问题，花了将近一天的时间。

## 题目要求 ##

编写一个html文件，从data.json文件获取数据，实现如图所示的页面及功能。要求如下：

1.  通过ajax异步获取数据，并显示到界面上
2.  当点击Action列的删除图标时，将本行记录从界面上删除
3.  可以使用流行的开发框架及插件，如jQuery、Bootstrap、VUE等  
    ![这里写图片描述][70]

## 实现过程 ##

1.  先准备好json数据
    
        {
            "test":[
                {"id":"1","dsn":"alibaba","pn":"payfor","email":"yang@qq.com"},
                {"id":"2","dsn":"tengxun","pn":"QQ","email":"longdaye@qq.com"},
                {"id":"3","dsn":"google","pn":"sq","email":"l23@qq.com"}
                ]
            }
2.  下载Action项中删除按钮的图标  
    可以去阿里巴巴矢量图中寻找自己喜欢并且合适的图案样式，应有尽有。  
    [http://www.iconfont.cn/][http_www.iconfont.cn]
3.  按照题目要求的界面编写HTML
    
        <!DOCTYPE HTML>
        <html>
        <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <link rel="stylesheet" type="text/css" href="css/table.css" />
        <script type="text/javascript" src="js/Jquery.min.js"></script>
        <script type="text/javascript" src="js/tableop.js"></script>
        <title>10JQKA</title>
        <style>
        *{
               margin:0;padding:0;}
        </style>
        </head>
        <body>  
        数据渲染
        <table class="imagetable" id="tab">
        </table> 
            <script type="text/javascript">
            $(function(){
               
                $.ajax({
            url:"data/test.json",
            type:"GET",
            dataType: "json",
            success:function(data){
               
                var msg = "";
                msg += "<tr>"+"<th>"+"ID"+"</th>"+"<th>"+"Datasource Name"+"</th>"+"<th>"+"Product Name"+"</th>"+"<th>"+"Email"+"</th>"+"<th>"+"Action"+"</th>"+"</tr>";
                for ( var i = 0; i < data.test.length; i++) {
              //循环json对象，拼接tr,td的html
                   msg += "<tr>";
                   msg += "<td>" + data.test[i].id + "</td>";
                   msg += "<td>" + data.test[i].dsn + "</td>";
                   msg += "<td>" + data.test[i].pn+ "</td>";
                   msg += "<td>" + data.test[i].email + "</td>";
                   msg += "<td>" + "<img id=\"imgstyle\" src=\"img/delete.png\" style=\"width:20px;heigth:20px\" onClick=\"delRow(this)\">" +"</td>";
                   msg += "</tr>";
                }
                $("#tab").html(msg);
                //通过jquery方式获取table，并把tr,td的html输出到table中
            },
            error:function(){
               
            alert("数据加载错误!");
            }
            });
            });
        </script>
        </body>
        </html>
4.  添加删除按钮的JS响应事件（借鉴的代码）
    
        //得到行对象
        function getRowObj(obj)
        {
              
        var i = 0;
        while(obj.tagName.toLowerCase() != "tr"){
            obj = obj.parentNode;
            if(obj.tagName.toLowerCase() == "table")return null;
        }
        return obj;
        }
        //根据得到的行对象得到所在的行数
        function getRowNo(obj){
              
        var trObj = getRowObj(obj);
        var trArr = trObj.parentNode.children;
        for(var trNo= 0; trNo < trArr.length; trNo++){
            if(trObj == trObj.parentNode.children[trNo]){
                alert(trNo+1);
        }
        }
        }
        //删除行
        function delRow(obj){
              
        if(confirm("确定删除么?")){
            var tr = this.getRowObj(obj);
            if(tr != null){
                tr.parentNode.removeChild(tr);
            }else{
                throw new Error("the given object is not contained by the table");
            }
        }
        }
5.  为table添加css样式
    
        table.imagetable {
         font-family: verdana,arial,sans-serif;
         font-size:16px;
         color:#004080;
         border:1px solid #ff1a1a; 
         border-collapse: collapse;
        }
        table.imagetable tr th {
         padding: 8px;
         border:1px solid #ff1a1a; 
        }
        table.imagetable tr td {
         padding: 8px;
         border:1px solid #ff1a1a; 
        }

## 运行结果演示 ##

![这里写图片描述][70 1]  
点击Action图标，会弹出是否确定删除的图标，选择确定，就可以在界面上删除按钮对应的一条信息。  
![这里写图片描述][70 2]  
需要说明的是该删除只是在页面显示删除，并没有删除test.json文件中的json数据，重新运行项目，json数据仍然会全部呈现。这个应该叫逻辑删除吧。

## 总结 ##

虽然是一个简单的例子，并且例子中所用到的样式还是之前现成的，但是在实现过程中还是遇到不少问题，花了将近一天时间，需要记录一下。

1.  首先遇到的问题是Ajax异步请求Json数据发生的跨域问题，web为了安全性考虑，提出同源的策略，同源是指，域名，协议，端口相同，当前域不能访问其他域内容。这个感觉还是比较复杂的问题，我理解的是，Ajax请求不能随意访问本地的数据资源。当在本地进行HTML和JS代码调试的时候，总会报错，后面意识到可能是之前遇到过的跨域问题，于是我将项目发布到tomcat上运行调试，这样就不存在跨域问题了。具体操作是在eclipse中创建一个web项目，将本地编写的前端代码文件夹放到web项目中的WebContent目录下即可。
2.  JSON数据变量表示问题。代码编写完，部署到tomcat服务器上，当我在用Google浏览器调试时，我发现json数据没办法显示出来，但是表头的数据会有显示，说明我的Ajax请求是成功的，因为执行了成功回调函数，为什么json数据渲染不出来呢，我检查了json数据格式，完全没有问题，又使用Console.log(data),打印出Object，当我alert(data\[1\].id)时，代码出错，显示data\[1\]值是undefined，之前看过JS高级教程可以知道，Undefined是ECMAScript定义的五种原始数据类型之一，undefined表示一个未声明的变量，或已声明但没有赋值的变量，或一个并不存在的对象属性。这时还没有发现问题所在，最后根据错误信息，看到了stack Overflow上一个回答提示可能是变量域没理解，于是重新看了一下根据ajax返回结果调用数据，才发现少了一个json中的test变量，正确的应该是data.test\[i\].id引用，这样才恍然大悟，被一个小错误折腾了好久。
    
    除了遇到的错误，这个例子还有很多可以完善的地方，如果数据条数过多，肯定需要进行分页显示处理，还有页面需要美化，现在都有多样，固定的渲染模板，还是挺容易的。

## 代码 ##

[https://github.com/yangsuperxiaolong/AJax-HTML][https_github.com_yangsuperxiaolong_AJax-HTML]

[70]: /images/20220516/260bd73f5367470ab89e4604329af394.png
[http_www.iconfont.cn]: http://www.iconfont.cn/
[70 1]: /images/20220516/3ec225e966b74eb88b1e0bdae973f7c7.png
[70 2]: /images/20220516/c76368a502d544ebb22a1192e650d871.png
[https_github.com_yangsuperxiaolong_AJax-HTML]: https://github.com/yangsuperxiaolong/AJax-HTML