Day20JavaWeb [tourism project] detailed function front desk code***

Details function front desk code

search_list.jsp page

View details link to add rid

 <p><a href="route_detail.jsp?rid='+route.rid+'">查看详情</a></p>\n

route_detail.jsp page

• 将 route_detail.html转 route_detail.jsp
• Get the rid passed from the previous page
• Use rid to send request to get json
• First display all text on the detail page
• Re-use the pictures of the recycle stitching details page
  

 <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
    <script type="text/javascript" src="js/getParameter.js"></script>
    <script type="text/javascript">
       $(function () {
    
    
           ///route_detail.jsp?rid=3
           var rid = getParameter("rid")
           // 当前页面需要取得 由【查看详情】传过来的rid
           $.get('routedetail/find?rid=' + rid, function (data) {
    
    
               // 发请求 给 routedetail/find?rid=3 可以获取rid对应的json数据
               if (200 == data.code) {
    
    
                   //console.log(data.data)
                   var route = data.data;
                   // 并json数据的值 赋给当前的标签 html()  $(id)
                   $("#category").html(route.category.cname)
                   $("#rname").html(route.rname)
                   $("#title").html(route.rname)
                   $("#introduce").html(route.routeIntroduce)
                   $("#sname").html('商家名称:' + route.seller.sname)
                   $("#consphone").html('商家电话' + route.seller.consphone)
                   $("#address").html('地址' + route.seller.address)
                   $("#price").html(route.price)
                   //图片
                   //左侧一张大图
                   $('#big_img').attr('src', route.rimage)
                   //右侧多张小图  前四张可见，第五张起，需要点击才可见
                   var alist = '';
                   //向上的箭头
                   alist += '<a class="up_img up_img_disable"></a>'

                   var list = route.imgList
                   for (var i = 0; i < list.length; i++) {
    
    
                       var routeImg = list[i]
                       //
                       var a = ''
                       if(i<4){
    
     //前四张
                           a = '<a title="" class="little_img" data-bigpic="'+routeImg.bigPic+'" >\n' +
                               '                        <img src="'+routeImg.smallPic+'">\n' +
                               '                        </a>'
                       }else{
    
    
                           a = '<a title="" class="little_img" data-bigpic="'+routeImg.bigPic+'" style="display:none;" >\n' +
                               '                        <img src="'+routeImg.smallPic+'">\n' +
                               '                        </a>'
                       }

                       alist+=a //将多个a标签拼接
                   }

                   //向下的箭头
                   alist += '<a class="down_img down_img_disable" style="margin-bottom: 0;"></a>'


                   $('#small_imgs').html(alist)

                   //给小图添加事件
                   clickImgs()
               }

           }, "json")

       })
    </script>