jq+ajax请求本地数据加载商品列表页并跳转详情页
2017-07-12 11:00
876 查看
效果:
![](https://img-blog.csdn.net/20170712103606827?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvd2ViX2h3Zw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
json文件:
商品列表页goodsList.js:
商品详情页goodsDetail.js:
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); }); } }) })
相关文章推荐
- jQuery+Ajax请求本地数据加载商品列表页并跳转详情页的实现方法
- ajax请求的与页面本身有的数据(页面加载时候存在)的一个区别
- listview请求数据源,会加载很多数据,需求就是在listview下面有一个button点击事件,当数据完成一个下面紧接着跟着button点击事件,进行点击跳转
- Chrome浏览器使用ajax加载本地数据文件问题
- 使用ajax请求本地JSON文件中的数据
- 本地HTMLajax跨域请求携带cookie数据,请求不会被登录拦截器拦截
- extjs.4.1,4.2,结合 jquery 遮罩层,ajax 请求时 数据遮罩,动态加载 contral
- dhl:asp.net mvc下用jQuery通过AJAX 实现HTTP 请求加载远程数据
- jq前端拦截ajax 使用本地数据调试
- react路由跳转、参数传递和Ajax请求API数据
- 通过 HTTP 请求加载远程数据(ajax,axios)
- js移动端滑动一个屏幕再加载新的数据以及ajax同步请求
- 巧用ajax请求服务器加载数据列表时提示loading的方法
- 巧用ajax请求服务器加载数据列表时提示loading
- js对js加载拼接的html代码中元素添加ajax方法请求后台数据
- jqury+ajax每秒向后台发送请求数据然后返回页面(包括jqruy页面加载完毕才执行方法)
- js页面用定时任务通过AJAX获取后台数据,但是从这个页面跳转到其他页面后,定时任务仍然在定时请求后台
- 加载页面时同时触发两个ajax请求,数据显示的顺序不一致
- Jquery.ajax 详细解释 通过Http请求加载远程数据
- 对于页面没加载完,ajax 请求数据放不到某个局部位置上