jQuery Ajax请求本地数据加载商品列表页面跳转到明细页面的实现方法

效果：

Json文件：

{《图书》:[{《ID》:1，《Imgurl》:《Images/ly . jpg》，《Price》:《45.00》，《Title》:《论语》，《出版》:《人民文学出版社》1999年，李可先生和志同道合的人重新燃起了他们的目标。积累和传播中华优秀传统文化，提供一个全新的国学体验馆，是我们的志向。" }，{'id' :2，' imgur' :' images/zy.jpg '，' price' :' 45.00 '，' title' :' golden mean '，' publish': '人民教育出版社'，' num' 333。1999年，李可先生和志同道合的人重新燃起了他们的目标。积累和传播中华优秀传统文化，提供一个全新的国学体验馆，是我们的志向。”}，{'id' :3，' imgur' :' images/dx.png '，' price' :' 45.00 '，' title' :' university '，' publish': '机械工业出版社'，' num' 333。1999年，李可先生和志同道合的人重新燃起了他们的目标。积累和传播中华优秀传统文化，提供一个全新的国学体验馆，是我们的志向。”}，{'id' :4，' imgur' :' images/mz.jpg '，' price' :' 45.00 '，' title' : '孟子'，' publish': '人民邮电出版社'，' num ' 3360 1999年，李可先生和志同道合的人重新燃起了他们的志向。积累和传播中华优秀传统文化，提供一个全新的国学体验馆，是我们的志向。”}，{'ID' :5，' Imgurl' :' Images/SJ.jpg '，' Price' :' 45.00 '，' Title' :' The诗经'，' publish': '人民文学出版社'，' Num ' 33 1999年，李可先生和志同道合的人重新燃起了他们的目标。积累和传播中华优秀传统文化，提供一个全新的国学体验馆，是我们的志向。" }，{'ID' :6，' Imgurl' :' Images/ss.jpg '，' Price' :' 45.00 '，' Title' : '尚书'，' publish': '人民文学出版社'，' Num' 333。1999年，李可先生和志同道合的人重新燃起了他们的目标。积累和传播中华优秀传统文化，提供一个全新的国学体验馆，是我们的志向。”}，{'id' :7，' imgur' :' images/lJ.jpg '，' price' :' 45.00 '，' title' : '礼记'，' publish': '上海人民出版社'，' num ' 1999年，李可先生和志同道合的人重新燃起了他们的目标。积累和传播中华优秀传统文化，提供一个全新的国学体验馆，是我们的志向。”}，{'id' :8，' imgur' :' images/yj.jpg '，' price' :' 45.00 '，' title' : '易经'，' publish': '人民文学出版社'，' num ' 1999年，李可先生和志同道合的人重新燃起了他们的目标。积累和传播中华优秀传统文化，提供一个全新的国学体验馆，是我们的志向。”}，{'ID' :9，' Imgurl' :' Images/CQ.jpg '，' Price' :' 45.00 '，' Title' : '春秋'，' publish': '电子工业出版社'，' NUM ' 300 1999年，李可先生和志同道合的人重新燃起了他们的目标。积累和传播中华优秀传统文化，提供一个全新的国学体验馆，是我们的志向。" }]}商品列表页面goodsList.js:

//请求json数据串联字符串，并跳转$ (function () {$)。Ajax ({type:' get '，url3360' data/data.json '，datatype3360' JSON '，success 3360 function(RES){ var str=' ul class==。$.每个(res.books，function(idx，val){ str=' Li class=\ ' sec _ Li ' a href=' goodsdetail . html？book id=' val . id ' ' class=' LP _ Li _ a ' div class=' LP _ Li _ imgWrap ' img src=' ' val . imgurl ' '//divp class=' LP _ Li _ name ' ' val . title '/PP class=' LP _ Li _ price ' ' ' ' ' val . price '/p/Ali '；});str='/ul '；$('.内容')。追加(字符串)；}，error : function(){ alert(error)} })；})商品详情页面goodsDetail.js:

$(function(){ //获取url中的参数函数geturlparam(name){ var reg=new regexp('(|)' name '=([]*)(| $)')；//构造一个正则表达式对象var r=window . location . search . substr(1)。将(reg)与目标参数匹配；//匹配目标参数if (r！=null)返回unescape(r[2])；返回null//返回参数值}//接收URL中的参数bookid var id=geturlparam(' bookid ')；console . log(' id : ' id)；$.ajax({ type:'get '，url:'data/data.json '，dataType:'json '，success:function(res，status){ console.log(status) $。每个(res.books，Function(idx，val) {//根据ID if(ID==val . ID){ var str=' img src=' ' val . imgur ' '/ppPublishing number:' val . ID '/ppPublishing house:' val . publish '/ppPages:' val . num '/。console . log(' index : ' idx)；} $('.bookdeatail’)。追加(字符串)；});}})})如上所述，边肖推出的jQuery Ajax，请求本地数据加载产品列表页面，跳转到详情页，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！