jQuery+Ajax+artTemplateローカルjsonデータを要求してリスト表示する

インターネット上でartTemplateフロントエンドテンプレートを学び、ここでは小さな例で関連知識点を記録します.例は2ページあり、1ページ目がリストページ、2ページ目が商品詳細ページであり、ブラウザがリストページを開くと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ファイル <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> $(function () { $.ajax({ type:"get", url:"data.json", dataType:"json", success:function (res) { var html1 = template('list', res); document.getElementById("content").innerHTML = html1; } } ); });
goodDetail.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> $(function () { $.ajax({ type:"get", url:"data.json", dataType:"json", success:function (res) { var html1 = template('list', res); document.getElementById("content").innerHTML = html1; } } ); });