zoukankan      html  css  js  c++  java
  • jQuery+ajax请求本地数据加载商品列表并跳转详情页

    转载出处:http://www.jb51.net/article/118502.htm

    json文件

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

    商品列表页goodsList.js

     1 //请求json数据拼接字符串,并在URL传参数id跳转
     2 $(function(){
     3  $.ajax({
     4   type:"get",
     5   url:"data/data.json",
     6   dataType:"json",
     7   success:function(res){
     8    var str = "<ul class='con_ul'>";
     9    $.each(res.books, function(idx,val) {
    10     str +="<li class="sec_li"><a href='goodsDetail.html?booksId="+val.id+"' class='lp_li_a'><div class='lp_li_imgWrap'><img src='"+val.imgUrl+"'/></div><p class='lp_li_name'>"
    11       +val.title+"</p><p class='lp_li_price'>"
    12       +'¥'+val.price+"</p></a><li>";
    13    });
    14    str += "</ul>";
    15    $('.content').append(str);
    16   },error:function(){
    17    alert(error)
    18   }
    19  });
    20 })

    商品详情页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='"+val.imgUrl+"'/><p>出版编号:"+val.id+"</p><p>出版社:"+val.publish+"</p><p>页数:"+val.num+"</p><p>简介:"+val.desc+"</p>";
         console.log('index:'+idx);
        }
        $('.booksDeatail').append(str);
       });
      }
      })
    })
  • 相关阅读:
    Java高并发24-使用自定义锁生成一个消费模型
    Java高并发连载23-基于AQS实现自定义同步器
    JavaScript连载38-编写评论界面
    Java高并发22-AQS条件变量的支持
    Java高并发21-AQS在共享,独占场景下的源码介绍
    SSH 集成Shiro和EhCache,设置登录超时时间无效解决办法。
    Vue3.0 + Echarts 实现地区人口数量分布展示
    从零开始学VUE之网络模块(Axios)
    从零开始学VUE之VueX(modules)
    从零开始学VUE之VueX(actions)
  • 原文地址:https://www.cnblogs.com/chwlhmt/p/8436091.html
Copyright © 2011-2022 走看看