详情功能前台代码

search_list.jsp页面

查看详情连接添加rid

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

route_detail.jsp页面

将 route_detail.html转 route_detail.jsp获取上个页面传过来的rid使用rid发送请求获取json先显示详情页面的所有文字再使用循环拼接详情页的图片 <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>