<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 = "@H_404_11@";
$.each(res.books,function(idx,val) {
str +="![]("+val.imgUrl+")
";
});
str += "";
$('.content').append(str);
},error:function(){
alert(error)
}
});
})
" +val.title+"
" +'￥'+val.price+"
商品详情页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 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。
原文链接：https://www.f2er.com/ajax/37912.html