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文件

goodDetail.html文件