列表页点击商品跳转到对应商品的详情页

最新推荐文章于 2025-03-15 18:40:55 发布

qq_36294683

最新推荐文章于 2025-03-15 18:40:55 发布

阅读量2.9w

点赞数 5

分类专栏：前端开发文章标签： ajax 页面跳转

本文链接：https://blog.csdn.net/qq_36294683/article/details/79257687

版权

8 篇文章

订阅专栏

 
 新建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> 
 