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 = "<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中的参数 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 = "<img src='"+val.imgUrl+"'/><p>出版编号:"+val.id+"</p><p>出版社:"+val.publish+"</p><p>页数:"+val.num+"</p><p>简介:"+val.desc+"</p>"; console.log('index:'+idx); } $('.booksDeatail').append(str); }); } }) })
原文链接:http://blog.csdn.net/web_hwg/article/details/75006973
(资源库 www.zyku.net)
您可能感兴趣的文章
- 07-30jquery v3.5.1(最新)
- 07-30jquery v3.4.1
- 07-30jquery v3.3.1
- 07-30jquery v3.2.1
- 07-30jquery v3.1.1
- 07-30jquery v3.0.0
- 07-30jquery v2.1.4
- 07-29jquery v2.1.1
- 07-29jquery v2.0.0
- 07-29jquery v1.11.3
- 09-14小米平板5pro启用杜比全景声教程分享
- 09-26帝国CMS 建立目录不成功!请检查目录权
- 07-05vivos10pro打开智能提醒功能方法介绍
- 01-11小米摄像机怎么连接wifi
- 01-16签名之王-签名之王应用软件功能介绍
- 11-12华为手机怎么设置字体大小
- 05-09基于JS实现限时抢购倒计时间表代码
- 01-13数创切图-数创切图应用软件功能介绍
- 07-05Linux gunzip命令
- 10-11帝国CMS7.5版预留实名认证系统接口
最近更新
阅读排行
猜你喜欢
- 01-03小减压-小减压应用软件功能介绍
- 02-23DedeCMS附件上传后不自动改名的实现方
- 04-05荣耀v40轻奢版增添桌面插件教程
- 01-11天天微课堂-天天微课堂应用软件功能介
- 03-31Matplotlib实现subplot和subplots简单
- 02-18真我x7pro至尊版系统分身设置教程
- 10-21魅族18x怎么分屏应用
- 07-05Linux mdu命令
- 01-12动感音乐相册app-动感音乐相册app应用
- 01-12无忧连WiFi-无忧连WiFi应用软件功能介