基於java的收藏排行功能之一：前端實現
阿新 • • 發佈：2018-12-09
1 需求：實現瀏覽器端的使用者收藏排行功能，同時實現搜尋、分頁功能。後臺實時提供資料更新
2 技術：html、JQuery、
3 頁面展示：
4前端頁面程式碼實現：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>收藏排行榜</title> <link rel="stylesheet" type="text/css" href="css/common.css"> <link rel="stylesheet" type="text/css" href="css/ranking-list.css"> <script src="js/jquery-3.3.1.js"></script> <script src="js/getParameter.js"></script> </head> <body> <!--引入頭部--> <div id="header"></div> <div class="contant"> <div class="shaixuan"> <span >線路名稱</span> <input type="text" id="cname"> <span>金額</span> <input type="text" id="highPrice">~<input type="text" id="lowPrice"> <button id="search-button">搜尋</button> </div> <div class="list clearfix" id="ulFavorite"> <ul > <li> <span class="num one">1</span> <a href="route_detail.html"><img src="images/jiangxuan_4.jpg" alt=""></a> <h4><a href="route_detail.html">【尾單特賣】全國-曼谷6-7天自由行 泰國出境旅遊 特價往6-7天自由行 泰國出境旅遊 特價往..</a></h4> <p> <b class="price">¥<span>899</span>起</b> <span class="shouchang">已收藏450次</span> </p> </li> <li> <span class="num two">2</span> <a href="route_detail.html"><img src="images/jiangxuan_4.jpg" alt=""></a> <h4><a href="route_detail.html">【尾單特賣】全國-曼谷6-7天自由行 泰國出境旅遊 特價往6-7天自由行 泰國出境旅遊 特價往..</a></h4> <p> <b class="price">¥<span>899</span>起</b> <span class="shouchang">已收藏450次</span> </p> </li> <li> <span class="num">3</span> <a href="route_detail.html"><img src="images/jiangxuan_4.jpg" alt=""></a> <h4><a href="route_detail.html">【尾單特賣】全國-曼谷6-7天自由行 泰國出境旅遊 特價往6-7天自由行 泰國出境旅遊 特價往..</a></h4> <p> <b class="price">¥<span>899</span>起</b> <span class="shouchang">已收藏450次</span> </p> </li> <li> <span class="num">4</span> <a href="route_detail.html"><img src="images/jiangxuan_4.jpg" alt=""></a> <h4><a href="route_detail.html">【尾單特賣】全國-曼谷6-7天自由行 泰國出境旅遊 特價往6-7天自由行 泰國出境旅遊 特價往..</a></h4> <p> <b class="price">¥<span>899</span>起</b> <span class="shouchang">已收藏450次</span> </p> </li> <li> <span class="num">5</span> <a href="route_detail.html"><img src="images/jiangxuan_4.jpg" alt=""></a> <h4><a href="route_detail.html">【尾單特賣】全國-曼谷6-7天自由行 泰國出境旅遊 特價往6-7天自由行 泰國出境旅遊 特價往..</a></h4> <p> <b class="price">¥<span>899</span>起</b> <span class="shouchang">已收藏450次</span> </p> </li> <li> <span class="num">6</span> <a href="route_detail.html"><img src="images/jiangxuan_4.jpg" alt=""></a> <h4><a href="route_detail.html">【尾單特賣】全國-曼谷6-7天自由行 泰國出境旅遊 特價往6-7天自由行 泰國出境旅遊 特價往..</a></h4> <p> <b class="price">¥<span>899</span>起</b> <span class="shouchang">已收藏450次</span> </p> </li> <li> <span class="num">7</span> <a href="route_detail.html"><img src="images/jiangxuan_4.jpg" alt=""></a> <h4><a href="route_detail.html">【尾單特賣】全國-曼谷6-7天自由行 泰國出境旅遊 特價往6-7天自由行 泰國出境旅遊 特價往..</a></h4> <p> <b class="price">¥<span>899</span>起</b> <span class="shouchang">已收藏450次</span> </p> </li> <li> <span class="num">8</span> <a href="route_detail.html"><img src="images/jiangxuan_4.jpg" alt=""></a> <h4><a href="route_detail.html">【尾單特賣】全國-曼谷6-7天自由行 泰國出境旅遊 特價往6-7天自由行 泰國出境旅遊 特價往..</a></h4> <p> <b class="price">¥<span>899</span>起</b> <span class="shouchang">已收藏450次</span> </p> </li> </ul> </div> <div class="pageNum"> <ul id="ulPage"> <li><a href="">首頁</a></li> <li class="threeword"><a href="#">上一頁</a></li> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li><a href="#">6</a></li> <li><a href="#">7</a></li> <li><a href="#">8</a></li> <li><a href="#">9</a></li> <li><a href="#">10</a></li> <li class="threeword"><a href="javascript:;">下一頁</a></li> <li class="threeword"><a href="javascript:;">末頁</a></li> </ul> </div> </div> <!--匯入底部--> <div id="footer"></div> <!--匯入佈局js，共享header和footer--> <script type="text/javascript" src="js/include.js"></script> <script> $(function () { var cname = getParameter("cname"); var highPrice = getParameter("highPrice"); var lowPrice = getParameter("lowPrice"); if(cname){ //url解碼 cname = window.decodeURIComponent(cname); } load(highPrice,lowPrice,null,cname); }); $("#search-button").click(function () { var cname = $("#cname").val(); var highPrice = $("#highPrice").val(); var lowPrice = $("#lowPrice").val(); location.href="http://localhost/favoriterank.html?highPrice="+highPrice+"&lowPrice="+lowPrice+"&cname="+cname; }); function load(highPrice,lowPrice,currentPage,cname) { $.post("favorite/favoriteOrder", {"highPrice":highPrice,"lowPrice":lowPrice,"currentPage":currentPage,"cname":cname}, function (data) { var arr = new Array("one", "two", "", "", "", "", "", "") var lis = '<ul >'; for (var i = 0; i < data.list.length; i++) { var li = '<li>\n' + ' <span class="num ' + arr[i] + '">' + (i + 1) + '</span>\n' + ' <a href="route_detail.html"><img src=' + data.list[i].rimage + ' alt=""></a>\n' + ' <h4><a href="route_detail.html">' + data.list[i].rname + '</a></h4>\n' + ' <p>\n' + ' <b class="price">¥<span>' + data.list[i].price + '</span>起</b>\n' + ' <span class="shouchang">已收藏' + data.list[i].count + '次</span>\n' + ' </p>\n' + ' </li>'; lis += li; } lis += '</ul>'; $("#ulFavorite").html(lis); /******************************************************************************************************/ var lisp='<li onclick="load('+highPrice+','+lowPrice+',1,\''+cname+'\')"><a>首頁</a></li>'; var fistpage=currentPage-1; if(fistpage<0){ fistpage=1; } lisp+='<li class="threeword" onclick="load('+highPrice+','+lowPrice+','+fistpage+',\''+cname+'\')"><a >上一頁</a></li>'; var bedin; var end; if(data.totalPage<10){ bedin=1; end=data.totalPage; }else { bedin=currentPage-5; end=currentPage+4; if(bedin<1){ bedin=1; end=bedin+9; } if(end>data.totalPage){ end=data.totalPage; bedin=end-9; } } for(var i=bedin;i<=end;i++){ var li; if(data.currentPage==i){ li='<li class="curPage" onclick="load('+highPrice+','+lowPrice+','+i+',\''+cname+'\')"><a>'+i+'</a></li>'; }else { li='<li onclick="load('+highPrice+','+lowPrice+','+i+',\''+cname+'\')"><a>'+i+'</a></li>'; } lisp+=li; } var lastpage=currentPage+1; if(lastpage>data.totalPage){ lastpage=data.totalPage; } lisp+='<li class="threeword" onclick="load('+highPrice+','+lowPrice+','+lastpage+',\''+cname+'\')"><a>下一頁</a></li>'; lisp+='<li class="threeword" onclick="load('+highPrice+','+lowPrice+','+data.totalPage+',\''+cname+'\')"><a>末頁</a></li>'; $("#ulPage").html(lisp); window.scrollTo(0,0); } ) } </script> </body> </html>