jQuery+Ajax+artTemplate请求本地json数据并进行列表显示

网上学习了artTemplate前端模板，在此通过一个小示例记录一下相关知识点。示例有两个页面，第一个页面为列表页面，第二个页面为商品详情页面，浏览器打开列表页面时，js会加载本地data.json文件，然后通过artTemplate模板渲染内容，显示商品列表。当点击商品的id时，跳转至详情页面，显示商品的部分详情。详情页是通过jquery来操作div元素以显示商品详情内容。

下面是页面及json文件

data.json文件

{
  "books": [
    {
      "id": 1,
      "imgUrl": "images/ly.jpg",
      "price": "45.00",
      "title": "论语",
      "publish": "人民文学出版社",
      "num": "303",
      "desc": "内容1"
    },
    {
      "id": 2,
      "imgUrl": "images/zy.jpg",
      "price": "45.00",
      "title": "中庸",
      "publish": "人民教育出版社",
      "num": "403",
      "desc": "内容2"
    },
    {
      "id": 3,
      "imgUrl": "images/dx.png",
      "price": "45.00",
      "title": "大学",
      "publish": "机械工业出版社",
      "num": "503",
      "desc": "内容3"
    }
  ]
}

index.html文件

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            #content td{
                padding: 20px;
            }
        </style>
        <script src="../js/jquery.min.js"></script>
        <script src="../js/template-web.js"></script>
        <script id="list" type="text/html">
            <table style="text-align: center;" cellspacing="0" border="1px solid blue">
                {{each books as value}}
                    <tr>
                        <td><a href="goodDetail.html?booksId={{value.id}}" target="_blank">{{value.id}}</a></td>
                        <td>{{value.imgUrl}}</td>
                        <td>{{value.price}}</td>
                        <td>{{value.title}}</td>
                        <td>{{value.publish}}</td>
                        <td>{{value.num}}</td>
                        <td>{{value.desc}}</td>
                    </tr>
                {{/each}}
            </table>
        </script>
        <script>
            $(function () {
               $.ajax({
                   type:"get",
                   url:"data.json",
                   dataType:"json",
                   success:function (res) {
                       var html1 = template('list', res);
                       document.getElementById("content").innerHTML = html1;
                   }
               }
               );
            });
        </script>
    </head>
    <body>
        <div id="content"></div>
    </body>
</html>

goodDetail.html文件

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            #content td{
                padding: 20px;
            }
        </style>
        <script src="../js/jquery.min.js"></script>
        <script src="../js/template-web.js"></script>
        <script id="list" type="text/html">
            <table style="text-align: center;" cellspacing="0" border="1px solid blue">
                {{each books as value}}
                    <tr>
                        <td><a href="goodDetail.html?booksId={{value.id}}" target="_blank">{{value.id}}</a></td>
                        <td>{{value.imgUrl}}</td>
                        <td>{{value.price}}</td>
                        <td>{{value.title}}</td>
                        <td>{{value.publish}}</td>
                        <td>{{value.num}}</td>
                        <td>{{value.desc}}</td>
                    </tr>
                {{/each}}
            </table>
        </script>
        <script>
            $(function () {
               $.ajax({
                   type:"get",
                   url:"data.json",
                   dataType:"json",
                   success:function (res) {
                       var html1 = template('list', res);
                       document.getElementById("content").innerHTML = html1;
                   }
               }
               );
            });
        </script>
    </head>
    <body>
        <div id="content"></div>
    </body>
</html>

来源：CSDN

作者：Henry_Jing

链接：https://blog.csdn.net/JCY1009015337/article/details/93652438

标签