效果:
json文件:
{ "books":[ {"id":1,"imgUrl":"images/ly.jpg","price":"45.00","title":"論語","publish":"人民文學(xué)出版社","num":"303","desc":"崇賢館始置唐代太宗朝。1999年,李克先生及志同道合者復(fù)興其宗旨。以積累、傳播中華優(yōu)秀傳統(tǒng)文化,提供全新國學(xué)體驗館為宏愿。"}, {"id":2,"imgUrl":"images/zy.jpg","price":"45.00","title":"中庸","publish":"人民教育出版社","num":"403","desc":"崇賢館始置唐代太宗朝。1999年,李克先生及志同道合者復(fù)興其宗旨。以積累、傳播中華優(yōu)秀傳統(tǒng)文化,提供全新國學(xué)體驗館為宏愿。"}, {"id":3,"imgUrl":"images/dx.png","price":"45.00","title":"大學(xué)","publish":"機械工業(yè)出版社","num":"503","desc":"崇賢館始置唐代太宗朝。1999年,李克先生及志同道合者復(fù)興其宗旨。以積累、傳播中華優(yōu)秀傳統(tǒng)文化,提供全新國學(xué)體驗館為宏愿。"}, {"id":4,"imgUrl":"images/mz.jpg","price":"45.00","title":"孟子","publish":"人民郵電出版社","num":"320","desc":"崇賢館始置唐代太宗朝。1999年,李克先生及志同道合者復(fù)興其宗旨。以積累、傳播中華優(yōu)秀傳統(tǒng)文化,提供全新國學(xué)體驗館為宏愿。"}, {"id":5,"imgUrl":"images/sj.jpg","price":"45.00","title":"詩經(jīng)","publish":"人民文學(xué)出版社","num":"308","desc":"崇賢館始置唐代太宗朝。1999年,李克先生及志同道合者復(fù)興其宗旨。以積累、傳播中華優(yōu)秀傳統(tǒng)文化,提供全新國學(xué)體驗館為宏愿。"}, {"id":6,"imgUrl":"images/ss.jpg","price":"45.00","title":"尚書","publish":"人民文學(xué)出版社","num":"603","desc":"崇賢館始置唐代太宗朝。1999年,李克先生及志同道合者復(fù)興其宗旨。以積累、傳播中華優(yōu)秀傳統(tǒng)文化,提供全新國學(xué)體驗館為宏愿。"}, {"id":7,"imgUrl":"images/lj.jpg","price":"45.00","title":"禮記","publish":"上海人民出版社","num":"703","desc":"崇賢館始置唐代太宗朝。1999年,李克先生及志同道合者復(fù)興其宗旨。以積累、傳播中華優(yōu)秀傳統(tǒng)文化,提供全新國學(xué)體驗館為宏愿。"}, {"id":8,"imgUrl":"images/yj.jpg","price":"45.00","title":"易經(jīng)","publish":"人民文學(xué)出版社","num":"803","desc":"崇賢館始置唐代太宗朝。1999年,李克先生及志同道合者復(fù)興其宗旨。以積累、傳播中華優(yōu)秀傳統(tǒng)文化,提供全新國學(xué)體驗館為宏愿。"}, {"id":9,"imgUrl":"images/cq.jpg","price":"45.00","title":"春秋","publish":"電子工業(yè)出版社","num":"903","desc":"崇賢館始置唐代太宗朝。1999年,李克先生及志同道合者復(fù)興其宗旨。以積累、傳播中華優(yōu)秀傳統(tǒng)文化,提供全新國學(xué)體驗館為宏愿。"} ] }
商品列表頁goodsList.js:
//請求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) } }); })
商品詳情頁goodsDetail.js:
$(function(){ //獲取url中的參數(shù) function getUrlParam(name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //構(gòu)造一個含有目標(biāo)參數(shù)的正則表達(dá)式對象 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>出版編號:"+val.id+"</p><p>出版社:"+val.publish+"</p><p>頁數(shù):"+val.num+"</p><p>簡介:"+val.desc+"</p>"; console.log('index:'+idx); } $('.booksDeatail').append(str); }); } }) })
以上所述是小編給大家介紹的jQuery+Ajax請求本地數(shù)據(jù)加載商品列表頁并跳轉(zhuǎn)詳情頁,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對億速云網(wǎng)站的支持!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。