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中的deferred使用方法
Mar 27 jQuery
浅谈struts1 &amp; jquery form 文件异步上传
May 25 jQuery
jquery网页加载进度条的实现
Jun 01 jQuery
jQuery Easyui Treegrid实现显示checkbox功能
Aug 08 jQuery
使用jQuery实现两个div中按钮互换位置的实例代码
Sep 21 jQuery
springmvc接收jquery提交的数组数据代码分享
Oct 28 jQuery
使用jQuery如何写一个含验证码的登录界面
May 13 jQuery
非常实用的jQuery代码段集锦【检测浏览器、滚动、复制、淡入淡出等】
Aug 08 jQuery
解决jquery validate 验证不通过后验证正确的信息仍残留在label上的方法
Aug 27 jQuery
jquery 键盘事件 keypress() keydown() keyup()用法总结
Oct 23 jQuery
Jquery高级应用Deferred对象原理及使用实例
May 28 jQuery
jQuery实现动态向上滚动
Dec 21 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中HTTP方式下的Gzip压缩传输方法举偶
2007/02/15 PHP
利用static实现表格的颜色隔行显示的代码
2007/09/02 PHP
关于Intype一些小问题的解决办法
2008/03/28 PHP
php smarty函数扩展
2010/03/15 PHP
PHP 循环列出目录内容的函数代码
2010/05/26 PHP
php 过滤器实现代码
2010/08/09 PHP
php中$_POST与php://input的区别实例分析
2015/01/07 PHP
PHP中的闭包(匿名函数)浅析
2015/02/07 PHP
Laravel 5 框架入门(四)完结篇
2015/04/09 PHP
php单一接口的实现方法
2015/06/20 PHP
YII2框架中ActiveDataProvider与GridView的配合使用操作示例
2020/03/18 PHP
分享33个jQuery与CSS3实现的绚丽鼠标悬停效果
2014/12/15 Javascript
javascript发送短信验证码实现代码
2015/11/12 Javascript
jQuery实现鼠标滑过预览图片大图效果的方法
2017/04/26 jQuery
JS非空验证及邮箱验证的实例
2017/08/11 Javascript
vue 全选与反选的实现方法(无Bug 新手看过来)
2018/02/09 Javascript
vue内置组件transition简单原理图文详解(小结)
2018/07/12 Javascript
如何用webpack4.0撸单页/多页脚手架 (jquery, react, vue, typescript)
2019/06/18 jQuery
vue data变量相互赋值后被实时同步的解决步骤
2020/08/05 Javascript
[03:45]Newbee战队出征西雅图 决战2016国际邀请赛
2016/08/02 DOTA
使用python检测主机存活端口及检查存活主机
2015/10/12 Python
浅谈numpy中linspace的用法 (等差数列创建函数)
2017/06/07 Python
Python+selenium 获取一组元素属性值的实例
2018/06/22 Python
Python实现的列表排序、反转操作示例
2019/03/13 Python
django ModelForm修改显示缩略图 imagefield类型的实例
2019/07/28 Python
django将数组传递给前台模板的方法
2019/08/06 Python
python 将视频 通过视频帧转换成时间实例
2020/04/23 Python
pytorch 查看cuda 版本方式
2020/06/23 Python
python smtplib发送多个email联系人的实现
2020/10/09 Python
详解background属性的8个属性值(面试题)
2020/11/02 HTML / CSS
工程师自我评价怎么写
2013/09/19 职场文书
餐饮业创业计划书范文
2014/01/06 职场文书
晚宴邀请函范文
2014/01/15 职场文书
学校端午节活动总结
2015/02/11 职场文书
催款律师函范文
2015/05/27 职场文书
预备党员半年考察意见
2015/06/01 职场文书