jQuery + Ajax请求本地数据加载商品列表页并跳转详情页的实现方法 - 行业资讯

效果: 　　

json文件:

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

商品列表页goodsList.js:

　　　　//请求json数据拼接字符串,并在URL传参数id跳转　　$(函数(){ 　　. ajax({美元　　类型:“获得”, 　　url:“数据/data.json”, 　　数据类型:“json”, 　　成功:函数(res) { 　　var str=" & lt; ul类=' con_ul祝辞”; 　　美元each (res。书、功能(idx val) { 　　str +=" & lt;李类=\ " sec_li \“祝辞& lt; a href=" https://www.yisu.com/zixun/goodsDetail.html?booksId=" + val.id +”“类=發p_li_a”祝辞& lt; div类=' lp_li_imgWrap祝辞& lt; img src=" + val.imgUrl +”的/祝辞& lt;/div> & lt; p类=發p_li_name”在“ 　　+ val.title +”& lt;/p> & lt; p类=發p_li_price”在“ 　　”+“￥”+ val.price + & lt;/p> & lt;/a> & lt; li>”; 　　}); 　　str +=? lt;/ul>”; 　　$ (' .content ') .append (str); 　　},错误:函数(){ 　　alert(错误) 　　} 　　}); 　　}) 　　　　

商品详情页goodsDetail.js:

　　　　　　$(函数(){//获取url中的参数　　函数getUrlParam(名字){ 　　var reg=new RegExp (”(^ |,)”+名字+”=((^和)*)(和| $)”);//构造一个含有目标参数的正则表达式对象　　var r=window.location.search.substr (1) .match(注册);//匹配目标参数　　如果(r !=null)返回unescape (r [2]);返回null;//返回参数的值　　}//接收URL中的参数booksId 　　var id=getUrlParam (“booksId”); 　　console.log (', ' + id); 　　. ajax({美元　　类型:“得到”, 　　url:“数据/data.json”, 　　数据类型:json, 　　成功:函数(res、状态){ 　　console.log(状态) 　　美元each (res。书、功能(idx val) {//根据id获取详情数据　　如果(id==val.id) { 　　var str=" & lt; img src=" + val.imgUrl +”的/祝辞& lt; p>出版编号:”+ val.id +“& lt;/p> & lt; p>出版社:“+ val.publish +“& lt;/p> & lt; p>页数:”+ val.num +“& lt;/p> & lt; p>简介:”+ val.desc +“& lt;/p>”; 　　console.log(“指数:”+ idx); 　　} 　　$ (' .booksDeatail ') .append (str); 　　}); 　　} 　　}) 　　})