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 remove()过滤被删除的元素(推荐)
Jul 18 jQuery
jQuery Position方法使用和兼容性
Aug 23 jQuery
360提示[高危]使用存在漏洞的JQuery版本的解决方法
Oct 27 jQuery
jQuery滚动条美化插件nicescroll简单用法示例
Apr 18 jQuery
jQuery对底部导航进行跳转并高亮显示的实例代码
Apr 23 jQuery
详解webpack引用jquery(第三方模块)的三种办法
Aug 21 jQuery
jquery实现直播弹幕效果
Nov 28 jQuery
jQuery实现验证用户登录
Dec 10 jQuery
jQuery操作选中select下拉框的值代码实例
Feb 07 jQuery
jQuery实现异步上传一个或多个文件
Aug 17 jQuery
jQuery实现简单评论功能
Aug 19 jQuery
jQuery实现影院选座订座效果
Apr 13 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生成静态页面详解
2006/11/19 PHP
php str_pad() 将字符串填充成指定长度的字符串
2010/02/23 PHP
PHP fopen()和 file_get_contents()应用与差异介绍
2014/03/19 PHP
ThinkPHP入库出现两次反斜线转义及数据库类转义的解决方法
2014/11/04 PHP
PHP检测字符串是否为UTF8编码的常用方法
2014/11/21 PHP
PHP中使用file_get_contents post数据代码例子
2015/02/13 PHP
Yii框架实现对数据库的CURD操作示例
2019/09/03 PHP
深入认识JavaScript中的函数
2007/01/22 Javascript
jquery Mobile入门—多页面切换示例学习
2013/01/08 Javascript
javascript如何创建表格(javascript绘制表格的二种方法)
2013/12/10 Javascript
查询json的数据结构的8种方式简介
2014/03/10 Javascript
JavaScript将当前时间转换成UTC标准时间的方法
2015/04/06 Javascript
javascript与Python快速排序实例对比
2015/08/10 Javascript
JavaScript中rem布局在react中的应用
2015/12/09 Javascript
实例解析js中try、catch、finally的执行规则
2017/02/24 Javascript
AngularJS常见过滤器用法实例总结
2017/07/06 Javascript
webpack打包node.js后端项目的方法
2018/03/10 Javascript
原生js实现密码强度验证功能
2020/03/18 Javascript
JavaScript onclick事件使用方法详解
2020/05/15 Javascript
Ruby使用eventmachine为HTTP服务器添加文件下载功能
2016/04/20 Python
《Python学习手册》学习总结
2018/01/17 Python
numpy:np.newaxis 实现将行向量转换成列向量
2019/11/30 Python
Pytorch中膨胀卷积的用法详解
2020/01/07 Python
python excel和yaml文件的读取封装
2021/01/12 Python
西班牙第一的网上药房:PromoFarma.com
2017/04/17 全球购物
意大利领先的线上奢侈品销售电商:Eleonora Bonucci
2017/10/17 全球购物
Pottery Barn阿联酋:购买家具、家居装饰及更多
2019/12/08 全球购物
英语感恩演讲稿
2014/01/14 职场文书
情况说明书格式范文
2014/05/06 职场文书
电工技术比武方案
2014/05/11 职场文书
2014幼儿园中班工作总结
2014/11/10 职场文书
2014年银行柜员工作总结
2014/11/12 职场文书
亮剑观后感600字
2015/06/05 职场文书
大学迎新生欢迎词
2015/09/29 职场文书
mybatis3中@SelectProvider传递参数方式
2021/08/04 Java/Android
Spring Data JPA框架持久化存储数据到数据库
2022/04/28 Java/Android