jq+ajax请求本地数据加载商品列表页并跳转详情页
来源:互联网 发布:61h端口 编辑:程序博客网 时间:2024/06/05 14:31
效果:
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); }); } })})
阅读全文
0 0
- jq+ajax请求本地数据加载商品列表页并跳转详情页
- 记动态加载商品列表页面(php,mySQL,jq+ajax)
- 安卓 跳转淘宝、京东app,并打开商品详情页
- iOS 跳转淘宝、天猫、京东商品详情页
- Android 商品详情页
- 商品详情页+tablayout
- 跳转商品详情
- 搜索,商品列表,商品详情
- RecyclerView展示数据+跳转详情页
- 商品详情页显示商品的详细信息
- ecshop 商品详情页商品放大镜功能
- 爬取京东商品详情页信息
- 列表页请求数据
- 商品列表获取数据ajax clone 分页
- 用js原生加jquery实现下拉跳转至商品详情页,上拉回到商品简介
- 在iOS应用中跳转到淘宝或天猫客户端商品详情页
- ios app url scheme跳转到淘宝商品详情页 唤醒app
- MUI预加载,从列表页到详情页
- 使用python读取mysql数据库并进行数据的操作
- adb操作命令
- 优雅降级与渐进增强
- lintcode --将二叉树拆成链表
- android中最常用的空间——ListView
- jq+ajax请求本地数据加载商品列表页并跳转详情页
- linux MATLAB 2017安装 ubuntu14.04
- 自定义checkbox和点击效果
- 矩阵排序
- filter和servlet的比较
- android 图片与byte数组间的转换
- java的poi技术读取Excel
- 1335: 算法实现题 2-5 半数集问题
- 计算机视觉-欧拉角和旋转矩阵之间的转换