{
 "books":[
  {"id":1,"imgUrl":"images/ly.jpg","price":"45.00","title":"論語(yǔ)","publish":"人民文學(xué)出版社","num":"303","desc":"崇賢館始置唐代太宗朝。1999年，李克先生及志同道合者復(fù)興其宗旨。以積累、傳播中華優(yōu)秀傳統(tǒng)文化，提供全新國(guó)學(xué)體驗(yàn)館為宏愿。"},
  {"id":2,"imgUrl":"images/zy.jpg","price":"45.00","title":"中庸","publish":"人民教育出版社","num":"403","desc":"崇賢館始置唐代太宗朝。1999年，李克先生及志同道合者復(fù)興其宗旨。以積累、傳播中華優(yōu)秀傳統(tǒng)文化，提供全新國(guó)學(xué)體驗(yàn)館為宏愿。"},
  {"id":3,"imgUrl":"images/dx.png","price":"45.00","title":"大學(xué)","publish":"機(jī)械工業(yè)出版社","num":"503","desc":"崇賢館始置唐代太宗朝。1999年，李克先生及志同道合者復(fù)興其宗旨。以積累、傳播中華優(yōu)秀傳統(tǒng)文化，提供全新國(guó)學(xué)體驗(yàn)館為宏愿。"},
  {"id":4,"imgUrl":"images/mz.jpg","price":"45.00","title":"孟子","publish":"人民郵電出版社","num":"320","desc":"崇賢館始置唐代太宗朝。1999年，李克先生及志同道合者復(fù)興其宗旨。以積累、傳播中華優(yōu)秀傳統(tǒng)文化，提供全新國(guó)學(xué)體驗(yàn)館為宏愿。"},
  {"id":5,"imgUrl":"images/sj.jpg","price":"45.00","title":"詩(shī)經(jīng)","publish":"人民文學(xué)出版社","num":"308","desc":"崇賢館始置唐代太宗朝。1999年，李克先生及志同道合者復(fù)興其宗旨。以積累、傳播中華優(yōu)秀傳統(tǒng)文化，提供全新國(guó)學(xué)體驗(yàn)館為宏愿。"},
  {"id":6,"imgUrl":"images/ss.jpg","price":"45.00","title":"尚書(shū)","publish":"人民文學(xué)出版社","num":"603","desc":"崇賢館始置唐代太宗朝。1999年，李克先生及志同道合者復(fù)興其宗旨。以積累、傳播中華優(yōu)秀傳統(tǒng)文化，提供全新國(guó)學(xué)體驗(yàn)館為宏愿。"},
  {"id":7,"imgUrl":"images/lj.jpg","price":"45.00","title":"禮記","publish":"上海人民出版社","num":"703","desc":"崇賢館始置唐代太宗朝。1999年，李克先生及志同道合者復(fù)興其宗旨。以積累、傳播中華優(yōu)秀傳統(tǒng)文化，提供全新國(guó)學(xué)體驗(yàn)館為宏愿。"},
  {"id":8,"imgUrl":"images/yj.jpg","price":"45.00","title":"易經(jīng)","publish":"人民文學(xué)出版社","num":"803","desc":"崇賢館始置唐代太宗朝。1999年，李克先生及志同道合者復(fù)興其宗旨。以積累、傳播中華優(yōu)秀傳統(tǒng)文化，提供全新國(guó)學(xué)體驗(yàn)館為宏愿。"},
  {"id":9,"imgUrl":"images/cq.jpg","price":"45.00","title":"春秋","publish":"電子工業(yè)出版社","num":"903","desc":"崇賢館始置唐代太宗朝。1999年，李克先生及志同道合者復(fù)興其宗旨。以積累、傳播中華優(yōu)秀傳統(tǒng)文化，提供全新國(guó)學(xué)體驗(yàn)館為宏愿。"} 
 ]
} 

//請(qǐng)求json數(shù)據(jù)拼接字符串，并在URL傳參數(shù)id跳轉(zhuǎn)
$(function(){
 $.ajax({
  type:"get",
  url:"data/data.json",
  dataType:"json",
  success:function(res){
   var str = "<ul class='con_ul'>";
   $.each(res.books, function(idx,val) {
    str +="<li class=\"sec_li\"><a href='goodsDetail.html?booksId="+val.id+"' class='lp_li_a'><div class='lp_li_imgWrap'><img src='"+val.imgUrl+"'/></div><p class='lp_li_name'>"
      +val.title+"</p><p class='lp_li_price'>"
      +'￥'+val.price+"</p></a><li>";
   });
   str += "</ul>";
   $('.content').append(str);
  },error:function(){
   alert(error)
  }
 });
})

$(function(){
  //獲取url中的參數(shù)
  function getUrlParam(name) {
   var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //構(gòu)造一個(gè)含有目標(biāo)參數(shù)的正則表達(dá)式對(duì)象
   var r = window.location.search.substr(1).match(reg); //匹配目標(biāo)參數(shù)
   if (r != null) return unescape(r[2]); return null; //返回參數(shù)值
  }
  //接收URL中的參數(shù)booksId
  var id = getUrlParam('booksId');
  console.log('id:'+id);
  $.ajax({
  type:'get',
  url:'data/data.json',
  dataType:'json',
  success:function(res,status){
   console.log(status)
   $.each(res.books, function(idx,val) {
    //根據(jù)id獲取詳情數(shù)據(jù)
    if(id == val.id){
     var str = "<img src='"+val.imgUrl+"'/><p>出版編號(hào)："+val.id+"</p><p>出版社："+val.publish+"</p><p>頁(yè)數(shù)："+val.num+"</p><p>簡(jiǎn)介："+val.desc+"</p>";
     console.log('index:'+idx);
    }
    $('.booksDeatail').append(str);
   });
  }
  })
})