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

前端之家收集整理的这篇文章主要介绍了jQuery+Ajax请求本地数据加载商品列表页并跳转详情页的实现方法前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

<p style="text-align: left">效果


<p style="text-align: center">

这里写图片描述

json文件

403",{"id":3,"imgUrl":"images/dx.png","title":"大学","publish":"机械工业出版社","num":"503",{"id":4,"imgUrl":"images/mz.jpg","title":"孟子","publish":"人民邮电出版社","num":"320",{"id":5,"imgUrl":"images/sj.jpg","title":"诗经","num":"308",{"id":6,"imgUrl":"images/ss.jpg","title":"尚书","num":"603",{"id":7,"imgUrl":"images/lj.jpg","title":"礼记","publish":"上海人民出版社","num":"703",{"id":8,"imgUrl":"images/yj.jpg","title":"易经","num":"803",{"id":9,"imgUrl":"images/cq.jpg","title":"春秋","publish":"电子工业出版社","num":"903","desc":"崇贤馆始置唐代太宗朝。1999年,李克先生及志同道合者复兴其宗旨。以积累、传播中华优秀传统文化,提供全新国学体验馆为宏愿。"} ] }

商品列表页goodsList.js:

跳转 $(function(){ $.ajax({ type:"get",url:"data/data.json",dataType:"json",success:function(res){ var str = "
    "; $.each(res.books,function(idx,val) { str +="
  • " +val.title+"

    " +'¥'+val.price+"

  • "; }); str += "
"; $('.content').append(str); },error:function(){ alert(error) } }); })

商品详情页goodsDetail.js:

获取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,val) { //根据id获取详情数据 if(id == val.id){ var str = "

出版编号:"+val.id+"

出版社:"+val.publish+"

页数:"+val.num+"

简介:"+val.desc+"

"; console.log('index:'+idx); } $('.booksDeatail').append(str); }); } }) })

以上所述是小编给大家介绍的jQuery+Ajax请求本地数据加载商品列表页跳转详情页。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

猜你在找的Ajax相关文章