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 Masonry瀑布流布局神器使用详解
May 25 jQuery
jQuery实现动态给table赋值的方法示例
Jul 04 jQuery
jQuery常用选择器详解
Jul 17 jQuery
使用jquery的jsonp如何发起跨域请求及其原理详解
Aug 17 jQuery
jQuery实现的简单动态添加、删除表格功能示例
Sep 21 jQuery
jQuery结合jQuery.cookie.js插件实现换肤功能示例
Oct 14 jQuery
jQuery简单实现向列表动态添加新元素的方法示例
Dec 25 jQuery
jQuery实现浏览器之间跳转并传递参数功能【支持中文字符】
Mar 28 jQuery
基于jquery实现左右上下移动效果
May 02 jQuery
jquery获取元素到屏幕四周可视距离的方法
Sep 05 jQuery
使用jQuery实现掷骰子游戏
Oct 24 jQuery
详解jQuery的核心函数和事件处理
Feb 18 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中多维数组的foreach遍历示例
2014/06/13 PHP
PHP session文件独占锁引起阻塞问题解决方法
2015/05/12 PHP
PHP Cli 模式设置进程名称的方法
2019/06/12 PHP
一些经常会用到的Javascript检测函数
2010/05/31 Javascript
javascript从右边截取指定字符串的三种实现方法
2013/11/29 Javascript
JavaScript学习笔记之定时器
2015/01/22 Javascript
js代码实现无缝滚动(文字和图片)
2015/08/20 Javascript
谈一谈javascript中继承的多种方式
2016/02/19 Javascript
Dropzone.js实现文件拖拽上传功能(附源码下载)
2016/11/22 Javascript
JavaScript闭包和范围实例详解
2016/12/19 Javascript
jQuery实现可移动选项的左右下拉列表示例
2016/12/26 Javascript
JQ中$(window).load和$(document).ready区别与执行顺序
2017/03/01 Javascript
VUE多层路由嵌套实现代码
2017/05/15 Javascript
Node.js  REPL (交互式解释器)实例详解
2017/08/06 Javascript
微信小程序HTTP接口请求封装的实现
2019/02/21 Javascript
Layer.js实现表格溢出内容省略号显示,悬停显示全部的方法
2019/09/16 Javascript
js实现图片上传到服务器和回显
2020/01/19 Javascript
解决vue-pdf查看pdf文件及打印乱码的问题
2020/11/04 Javascript
[55:44]完美世界DOTA2联赛决赛 FTD vs Phoenix 第二场 11.08
2020/11/11 DOTA
urllib2自定义opener详解
2014/02/07 Python
Python基于tkinter模块实现的改名小工具示例
2017/07/27 Python
利用numpy实现一、二维数组的拼接简单代码示例
2017/12/15 Python
将python图片转为二进制文本的实例
2019/01/24 Python
Django基础知识 web框架的本质详解
2019/07/18 Python
北美最大的参茸药食商城:德成行
2020/12/06 全球购物
求职信范文怎么写
2014/01/29 职场文书
党员干部承诺书
2014/03/25 职场文书
《去年的树》教学反思
2014/04/11 职场文书
党员廉洁自律承诺书
2014/05/26 职场文书
任命书怎么写
2014/06/04 职场文书
党的群众路线领导班子整改方案
2014/09/27 职场文书
2015年社区统计工作总结
2015/04/21 职场文书
Python图片处理之图片裁剪教程
2021/05/27 Python
启动Tomcat时出现大量乱码的解决方法
2021/06/21 Java/Android
vue+iview实现手机号分段输入框
2022/03/25 Vue.js
MySQL索引失效十种场景与优化方案
2023/05/08 MySQL