第一步：
新建dome1.html列表页
通过jq的each遍历，
res.books
是要遍历的数据，
each处理json数据，这个each就有更厉害了，能循环每一个属性
var obj = { one:1, two:2, three:3}; each(obj, function(key, val) { alert(key); alert(val); });
这里alert(key)将输出one two three
alert(val)将输出one，1，two，2，three,3
跳转通过拼接a标签的href bookId通过具体页面来写，给bookId赋值，就是json数据里面的商品id值，之后再到商品详情页接收id
"<a href='dome2.html?booksId="+val.id+"'>
<div class="warp">
</div>
<script src="node_modules/jquery/dist/jquery.min.js" type="text/javascript"></script>
<script>
$(function () {
$.ajax({
type:"get",
url:"dome1.json",
dataType:"json",
success:function (res) {
console.log(res.books);
var str = "";
$.each(res.books, function(idx,val) {
str += "<div class=\"content\">" +
"<a href='dome2.html?booksId="+val.id+"'><img src='"+val.imgUrl+"'/></a>" +
"<p class=\"p\">"+val.price+"</p>" +
"</div>"
});
$('.warp').append(str);
}
})
})
</script>
第二步：
新建dome2.html详情页
接收传过来的url参数拿到列表页中a标签里面写的bookId
//获取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);
然后在遍历中进行判断，id是否等于val.id
if(id == val.id){
}
<div class="aticle">
</div>
<script src="node_modules/jquery/dist/jquery.min.js" type="text/javascript"></script>
<script>
$(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:"dome1.json",
dataType:"json",
success:function (res) {
console.log(res);
$.each(res.books,function (idx,val) {
if(id == val.id){
var innT ="<div class=\"aticle_content\">\n" +
"<div class=\"img\"><img src='"+val.imgUrl+"'/></div>\n" +
"<p class=\"title\">"+val.title+"</p>\n" +
"<p class=\"publish\">"+val.publish+"</p>\n" +
"<p class=\"num\">"+val.num+"</p>\n" +
"<p class=\"price\">"+val.price+"</p>\n" +
"<p class=\"publish\">"+val.publish+"</p>\n" +
"<p class=\"desc\">"+val.desc+"</p>\n" +
"</div>"
}
$(".aticle").append(innT);
})
}
})
})
</script>