實例分享jQuery和Ajax請求本地資料載入商品清單頁並跳轉詳情頁-js教程-PHP中文網

本文透過實例代碼給大家介紹了jQuery+Ajax請求本地數據加載商品列表頁並跳轉詳情頁,需要的朋友可以參考下，希望能幫助到大家。

效果：

實例分享jQuery和Ajax請求本地資料載入商品清單頁並跳轉詳情頁

json檔案：

{ "books":[ {"id":1,"imgUrl":"images/ly.jpg","price":"45.00","title":"论语","publish":"人民文学出版社","num":"303","desc":"崇贤馆始置唐代太宗朝。1999年，李克先生及志同道合者复兴其宗旨。以积累、传播中华优秀传统文化，提供全新国学体验馆为宏愿。"}, {"id":2,"imgUrl":"images/zy.jpg","price":"45.00","title":"中庸","publish":"人民教育出版社","num":"403","desc":"崇贤馆始置唐代太宗朝。1999年，李克先生及志同道合者复兴其宗旨。以积累、传播中华优秀传统文化，提供全新国学体验馆为宏愿。"}, {"id":3,"imgUrl":"images/dx.png","price":"45.00","title":"大学","publish":"机械工业出版社","num":"503","desc":"崇贤馆始置唐代太宗朝。1999年，李克先生及志同道合者复兴其宗旨。以积累、传播中华优秀传统文化，提供全新国学体验馆为宏愿。"}, {"id":4,"imgUrl":"images/mz.jpg","price":"45.00","title":"孟子","publish":"人民邮电出版社","num":"320","desc":"崇贤馆始置唐代太宗朝。1999年，李克先生及志同道合者复兴其宗旨。以积累、传播中华优秀传统文化，提供全新国学体验馆为宏愿。"}, {"id":5,"imgUrl":"images/sj.jpg","price":"45.00","title":"诗经","publish":"人民文学出版社","num":"308","desc":"崇贤馆始置唐代太宗朝。1999年，李克先生及志同道合者复兴其宗旨。以积累、传播中华优秀传统文化，提供全新国学体验馆为宏愿。"}, {"id":6,"imgUrl":"images/ss.jpg","price":"45.00","title":"尚书","publish":"人民文学出版社","num":"603","desc":"崇贤馆始置唐代太宗朝。1999年，李克先生及志同道合者复兴其宗旨。以积累、传播中华优秀传统文化，提供全新国学体验馆为宏愿。"}, {"id":7,"imgUrl":"images/lj.jpg","price":"45.00","title":"礼记","publish":"上海人民出版社","num":"703","desc":"崇贤馆始置唐代太宗朝。1999年，李克先生及志同道合者复兴其宗旨。以积累、传播中华优秀传统文化，提供全新国学体验馆为宏愿。"}, {"id":8,"imgUrl":"images/yj.jpg","price":"45.00","title":"易经","publish":"人民文学出版社","num":"803","desc":"崇贤馆始置唐代太宗朝。1999年，李克先生及志同道合者复兴其宗旨。以积累、传播中华优秀传统文化，提供全新国学体验馆为宏愿。"}, {"id":9,"imgUrl":"images/cq.jpg","price":"45.00","title":"春秋","publish":"电子工业出版社","num":"903","desc":"崇贤馆始置唐代太宗朝。1999年，李克先生及志同道合者复兴其宗旨。以积累、传播中华优秀传统文化，提供全新国学体验馆为宏愿。"} ] }

登入後複製

商品清單頁goodsList.js：

//请求json数据拼接字符串，并在URL传参数id跳转 $(function(){ $.ajax({ type:"get", url:"data/data.json", dataType:"json", success:function(res){ var str = ""; $.each(res.books, function(idx,val) { str +="
" +val.title+"
" +'￥'+val.price+"
"; }); str += "
"; $('.content').append(str); },error:function(){ alert(error) } }); })

登入後複製

商品詳情頁goodsDetail.js：

$(function(){ //获取url中的参数 function getUrlParam(name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象 var r = window.location.search.substr(1).match(reg); //匹配目标参数 if (r != null) return unescape(r[2]); return null; //返回参数值 } //接收URL中的参数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) { //根据id获取详情数据 if(id == val.id){ var str = "出版编号："+val.id+"
出版社："+val.publish+"
页数："+val.num+"
简介："+val.desc+"
"; console.log('index:'+idx); } $('.booksDeatail').append(str); }); } }) })

登入後複製