真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

成都創(chuàng)新互聯(lián)網(wǎng)站制作重慶分公司

jQuery+Ajax請求本地數(shù)據(jù)加載商品列表頁并跳轉詳情頁的實現(xiàn)方法

效果:

成都創(chuàng)新互聯(lián)-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設、高性價比通遼網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式通遼網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設找我們,業(yè)務覆蓋通遼地區(qū)。費用合理售后完善,10余年實體公司更值得信賴。

jQuery+Ajax請求本地數(shù)據(jù)加載商品列表頁并跳轉詳情頁的實現(xiàn)方法

json文件:

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

商品列表頁goodsList.js:

//請求json數(shù)據(jù)拼接字符串,并在URL傳參數(shù)id跳轉
$(function(){
 $.ajax({
  type:"get",
  url:"data/data.json",
  dataType:"json",
  success:function(res){
   var str = "";
   $('.content').append(str);
  },error:function(){
   alert(error)
  }
 });
})

商品詳情頁goodsDetail.js:

$(function(){
  //獲取url中的參數(shù)
  function getUrlParam(name) {
   var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //構造一個含有目標參數(shù)的正則表達式對象
   var r = window.location.search.substr(1).match(reg); //匹配目標參數(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 = "

出版編號:"+val.id+"

出版社:"+val.publish+"

頁數(shù):"+val.num+"

簡介:"+val.desc+"

"; console.log('index:'+idx); } $('.booksDeatail').append(str); }); } }) })

以上所述是小編給大家介紹的jQuery+Ajax請求本地數(shù)據(jù)加載商品列表頁并跳轉詳情頁,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對創(chuàng)新互聯(lián)網(wǎng)站的支持!


當前題目:jQuery+Ajax請求本地數(shù)據(jù)加載商品列表頁并跳轉詳情頁的實現(xiàn)方法
路徑分享:http://weahome.cn/article/pejjii.html

其他資訊

在線咨詢

微信咨詢

電話咨詢

028-86922220(工作日)

18980820575(7×24)

提交需求

返回頂部