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


Posted in jQuery onJuly 12, 2017

效果:

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);
   });
  }
  })
})

以上所述是小编给大家介绍的jQuery+Ajax请求本地数据加载商品列表页并跳转详情页,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

jQuery 相关文章推荐
jQuery插件Echarts实现的渐变色柱状图
Mar 23 jQuery
JQuery.dataTables表格插件添加跳转到指定页
Jun 09 jQuery
jquery加载单文件vue组件的方法
Jun 20 jQuery
jQuery实现的简单无刷新评论功能示例
Nov 08 jQuery
jQuery+SpringMVC中的复选框选择与传值实例
Jan 08 jQuery
jQuery实现左右滑动的toggle方法
Mar 03 jQuery
jquery拖拽自动排序插件使用方法详解
Jul 20 jQuery
jQuery动态操作表单示例【基于table表格】
Dec 06 jQuery
高效jQuery选择器的5个技巧实例分析
Nov 26 jQuery
jQuery实现全选、反选和不选功能的方法详解
Dec 04 jQuery
jQuery实现飞机大战小游戏
Jul 05 jQuery
jQuery实现可以扩展的日历
Dec 01 jQuery
jQuery 循环遍历改变a标签的href(实例讲解)
Jul 12 #jQuery
jQuery实现节点的追加、替换、删除、复制功能示例
Jul 11 #jQuery
使用jQuery实现动态添加小广告
Jul 11 #jQuery
jquery.validate.js 多个相同name的处理方式
Jul 10 #jQuery
jQuery实现html table行Tr的复制、删除、计算功能
Jul 10 #jQuery
jQuery实现QQ空间汉字转拼音功能示例
Jul 10 #jQuery
基于jQuery Easyui实现登陆框界面
Jul 10 #jQuery
You might like
PHP实现多条件查询实例代码
2010/07/17 PHP
jQuery ready函数滥用分析
2011/02/16 Javascript
5个最佳的Javascript日期处理类库分享
2012/04/15 Javascript
jQuery中ready事件用法实例
2015/01/19 Javascript
实现非常简单的js双向数据绑定
2015/11/06 Javascript
谈一谈JS消息机制和事件机制的理解
2016/04/14 Javascript
jQuery添加options点击事件并传值实例代码
2016/05/18 Javascript
微信小程序 按钮滑动的实现方法
2017/09/27 Javascript
IE11下使用canvas.toDataURL报SecurityError错误的解决方法
2017/11/19 Javascript
基于zTree树形菜单的使用实例
2017/12/25 Javascript
详解express + mock让前后台并行开发
2018/06/06 Javascript
layui将table转化表单显示的方法(即table.render转为表单展示)
2019/09/24 Javascript
解决Angularjs异步操作后台请求用$q.all排列先后顺序问题
2019/11/29 Javascript
[01:10]DOTA2次级职业联赛 - EP战队宣传片
2014/12/01 DOTA
python将unicode转为str的方法
2017/06/21 Python
Python中装饰器学习总结
2018/02/10 Python
Python基于sklearn库的分类算法简单应用示例
2018/07/09 Python
Python UnboundLocalError和NameError错误根源案例解析
2018/10/31 Python
Scrapy模拟登录赶集网的实现代码
2020/07/07 Python
python 调整图片亮度的示例
2020/12/03 Python
世界上最好的帽子:Tilley
2016/11/27 全球购物
美国伊甸园兄弟种子公司:Eden Brothers
2018/07/01 全球购物
ALDO加拿大官网:加拿大女鞋品牌
2018/12/22 全球购物
大学毕业感言200字
2014/03/09 职场文书
工作评语大全
2014/04/26 职场文书
关于保护环境的标语
2014/06/09 职场文书
体育节口号
2014/06/19 职场文书
民主生活会剖析材料
2014/09/30 职场文书
一年级班主任工作总结2014
2014/11/08 职场文书
2014年部门工作总结
2014/11/12 职场文书
幼儿园小班个人工作总结
2015/02/12 职场文书
复兴之路展览观后感
2015/06/02 职场文书
党支部鉴定意见
2015/06/02 职场文书
2016年119消防宣传日活动总结
2016/04/05 职场文书
redis实现排行榜功能
2021/05/24 Redis
Sql Server之数据类型详解
2022/02/28 SQL Server