Example sharing jQuery and Ajax request local data to load the product list page and jump to the details page

This article introduces jQuery+Ajax to request local data to load the product list page and jump to the details page through example code. Friends in need can refer to it. I hope it can help you.

Effect:

json file:

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

Product list page goodsList.js:

//请求json数据拼接字符串，并在URL传参数id跳转
$(function(){
 $.ajax({
  type:"get",
  url:"data/data.json",
  dataType:"json",
  success:function(res){
   var str = "<ul class=&#39;con_ul&#39;>";
   $.each(res.books, function(idx,val) {
    str +="<li class=\"sec_li\"><a href=&#39;goodsDetail.html?booksId="+val.id+"&#39; class=&#39;lp_li_a&#39;><p class=&#39;lp_li_imgWrap&#39;><img  src=&#39;"+val.imgUrl+"&#39;/ alt="Example sharing jQuery and Ajax request local data to load the product list page and jump to the details page" ></p><p class=&#39;lp_li_name&#39;>"
      +val.title+"</p><p class=&#39;lp_li_price&#39;>"
      +&#39;￥&#39;+val.price+"</p></a><li>";
   });
   str += "</ul>";
   $(&#39;.content&#39;).append(str);
  },error:function(){
   alert(error)
  }
 });
})

Product details page goodsDetail.js:

$(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:'data/data.json',
  dataType:'json',
  success:function(res,status){
   console.log(status)
   $.each(res.books, function(idx,val) {
    //根据id获取详情数据
    if(id == val.id){
     var str = "<img  src=&#39;"+val.imgUrl+"&#39;/ alt="Example sharing jQuery and Ajax request local data to load the product list page and jump to the details page" ><p>出版编号："+val.id+"</p><p>出版社："+val.publish+"</p><p>页数："+val.num+"</p><p>简介："+val.desc+"</p>";
     console.log(&#39;index:&#39;+idx);
    }
    $(&#39;.booksDeatail&#39;).append(str);
   });
  }
  })
})

Related recommendations:

zTree asynchronous loading and expansion of the first level node method implementation

PHP loading Font and save it as an image example sharing

Ajax implementation of dynamic loading combo box example detailed explanation

The above is the detailed content of Example sharing jQuery and Ajax request local data to load the product list page and jump to the details page. For more information, please follow other related articles on the PHP Chinese website!