黑马旅游网 ajax+html在前端实现页标签个数控制
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>黑马旅游-搜索</title> 9 <link rel="stylesheet" type="text/css" href="css/common.css"> 10 <link rel="stylesheet" href="css/search.css"> 11 <style> 12 #pageBar>li{ 13 cursor: pointer; 14 } 15 </style> 16 <script src="js/jquery-3.3.1.js"></script> 17 <script src="js/getParameter.js"></script> 18 <script> 19 $(function () { 20 /* 21 分类 22 */ 23 let cid = getParameter("cid"); 24 //加载时根据cid查询 25 queryPage(cid); 26 }); 27 28 function queryPage(cid, currentPage){ 29 $.get("route/queryPage",{cid: cid, currentPage: currentPage}, function (pb) { 30 /* 31 显示分页条,首页上一页页码下一页末页,总页总条 32 */ 33 // <li class="threeword"><a href="#">上一页</a></li> 34 // <li><a href="">首页</a></li> 35 // <li class="threeword"><a href="#">上一页</a></li> 36 // <li><a href="#">1</a></li> 37 // <li><a href="#">2</a></li> 38 // <li><a href="#">3</a></li> 39 // <li><a href="#">4</a></li> 40 // <li><a href="#">5</a></li> 41 // <li><a href="#">6</a></li> 42 // <li><a href="#">7</a></li> 43 // <li><a href="#">8</a></li> 44 // <li><a href="#">9</a></li> 45 // <li><a href="#">10</a></li> 46 // <li class="threeword"><a href="javascript:;">下一页</a></li> 47 // <li class="threeword"><a href="javascript:;">末页</a></li> 48 49 // alert(JSON.stringify(pb)); 50 //总条 51 $("#totalCount").html(pb.totalCount); 52 //总页 53 $("#totalPage").html(pb.totalPage); 54 55 // var lis;//必须初始化,不然与字符串相加,会将undefined加进去 56 var lis = ""; 57 58 if(pb.totalPage != 0 && pb.currentPage != 1){//总页数不为0,并且当前页不是第1页,则显示首页上一页 59 //首页 60 var firstPage = '<li onclick="queryPage('+cid+', '+1+');"><a href="javascript: void(0);">首页</a></li>'; 61 lis += firstPage; 62 63 //上一页 64 var prePage = '<li onclick="queryPage('+cid+', '+ (pb.currentPage - 1) +');" class="threeword"><a href="javascript: void(0);">上一页</a></li>'; 65 lis += prePage; 66 } 67 68 //页标签个数控制 pageLinkCount, inLeft, leftOff, rightOff, startPage, endPage 69 var pageLinkCount = 5;//显示页标签个数 70 var inLeft = false;//当页标签为偶数时,当前页居左还是居右 71 72 var leftOff; 73 var rightOff; 74 // if(pageLinkCount % 2 != 0){ 75 // //奇数个页标签 76 // leftOff = rightOff = pageLinkCount / 2; 77 // }else{ 78 // //偶数个页标签 79 // if(inLeft){ 80 // leftOff = pageLinkCount / 2 - 1; 81 // rightOff = pageLinkCount / 2; 82 // }else{ 83 // leftOff = pageLinkCount / 2; 84 // rightOff = pageLinkCount / 2 + 1; 85 // } 86 // } 87 88 leftOff = rightOff = Math.floor(pageLinkCount / 2); 89 if(pageLinkCount % 2 == 0){ 90 inLeft ? leftOff-- : rightOff--; 91 } 92 93 var startPage; 94 var endPage; 95 if(pb.totalPage < pageLinkCount){ 96 //总页数小于页标签数 97 startPage = 1; 98 endPage = pb.totalPage; 99 }else{ 100 //总页数大于页标签数 101 startPage = pb.currentPage - leftOff; 102 endPage = pb.currentPage + rightOff; 103 104 if(startPage < 1){ 105 startPage = 1; 106 endPage = pageLinkCount; 107 } 108 109 if(endPage > pb.totalPage){ 110 endPage = pb.totalPage; 111 startPage = pb.totalPage - pageLinkCount + 1; 112 } 113 } 114 115 116 //页码 117 for (let i = startPage; i <= endPage; i++) { 118 if(i == pb.currentPage){ 119 lis += '<li class="curPage" onclick="queryPage('+cid+', '+i+' );"><a href="javascript:void(0);">'+i+'</a></li>'; 120 }else{ 121 lis += '<li onclick="queryPage('+cid+', '+i+' );"><a href="javascript:void(0);">'+i+'</a></li>'; 122 } 123 } 124 125 if(pb.totalPage != 0 && pb.currentPage != pb.totalPage){ 126 //下一页 127 var nextPage = '<li onclick="queryPage('+cid+', '+(pb.currentPage + 1)+' );" class="threeword"><a href="javascript: void(0);">下一页</a></li>'; 128 lis += nextPage; 129 //末页 130 var lastPage = '<li onclick="queryPage('+cid+', '+pb.totalPage+' );"><a href="javascript: void(0);">末页</a></li>'; 131 lis += lastPage; 132 } 133 134 $("#pageBar").html(lis); 135 136 /* 137 显示分页数据 138 */ 139 var routes = pb.list; 140 var routeLis = ""; 141 if(routes){ 142 for (let i = 0; i < routes.length; i++) { 143 routeLis += '<li>\n' + 144 ' <div class="img"><img src="'+routes[i].rimage+'" alt=""></div>\n' + 145 ' <div class="text1">\n' + 146 ' <p>'+routes[i].rname+'</p>\n' + 147 ' <br/>\n' + 148 ' <p>'+routes[i].routeIntroduce+'</p>\n' + 149 ' </div>\n' + 150 ' <div class="price">\n' + 151 ' <p class="price_num">\n' + 152 ' <span>¥</span>\n' + 153 ' <span>'+routes[i].price+'</span>\n' + 154 ' <span>起</span>\n' + 155 ' </p>\n' + 156 ' <p><a href="route_detail.html?rid='+routes[i].rid+'">查看详情</a></p>\n' + 157 ' </div>\n' + 158 '</li>' 159 } 160 } 161 $("#routeUL").html(routeLis); 162 163 //滚动到顶部 164 // window.scrollTo(0, 0); 165 }); 166 } 167 168 function getQuery() { 169 let search = location.search; 170 // alert(search); 171 172 //没有查询参数 173 let i = search.indexOf("?"); 174 if( i == -1){ 175 return {}; 176 }; 177 178 //去除问号 179 search = search.substring(i + 1); 180 181 //得到参数 182 let result = {}; 183 let items = search.split("&"); 184 for(let item of items){ 185 let split = item.split("="); 186 // alert(split[0]); 187 // alert(split[1]); 188 if(split[0]){ 189 result[decodeURIComponent(split[0])] = decodeURIComponent(split[1]); 190 } 191 } 192 return result; 193 } 194 195 function getQueryStringArgs(){ 196 var qs=location.search.length ? location.search.substring(1) : ""; 197 var args={}; 198 var items=qs.length ? qs.split("&") : []; 199 var item=null, 200 name=null, 201 value=null, 202 len=items.length; 203 for(var i=0;i<len;i++){ 204 item=items[i].split("="); 205 if(item[0].length){ 206 name=decodeURIComponent(item[0]); 207 value=decodeURIComponent(item[1]); 208 args[name]=value; 209 } 210 } 211 return args; 212 } 213 214 function getQueryArgs(){ 215 let qs=location.search.length ? location.search.substring(1) : ""; 216 let args={}; 217 let items=qs.length ? qs.split("&") : []; 218 219 for(let item of items){ 220 let pair=item.split("="); 221 if(pair[0].length){ 222 args[decodeURIComponent(pair[0])]= decodeURIComponent(pair[1]); 223 } 224 } 225 return args; 226 } 227 </script> 228 </head> 229 <body> 230 <!--引入头部--> 231 <div id="header"></div> 232 <div class="page_one"> 233 <div class="contant"> 234 <div class="crumbs"> 235 <img src="images/search.png" alt=""> 236 <p>黑马旅行><span>搜索结果</span></p> 237 </div> 238 <div class="xinxi clearfix"> 239 <div class="left"> 240 <div class="header"> 241 <span>商品信息</span> 242 <span class="jg">价格</span> 243 </div> 244 <ul id="routeUL"> 245 <li> 246 <div class="img"><img src="images/04-search_03.jpg" alt=""></div> 247 <div class="text1"> 248 <p>【减100元 含除夕/春节出发】广州增城三英温泉度假酒店/自由行套票</p> 249 <br/> 250 <p>1-2月出发,网付立享¥1099/2人起!爆款位置有限,抢完即止!</p> 251 </div> 252 <div class="price"> 253 <p class="price_num"> 254 <span>¥</span> 255 <span>299</span> 256 <span>起</span> 257 </p> 258 <p><a href="route_detail.html">查看详情</a></p> 259 </div> 260 </li> 261 <li> 262 <div class="img"><img src="images/04-search_03.jpg" alt=""></div> 263 <div class="text1"> 264 <p>浪花朵朵旅行普吉岛丛林飞跃空中飞人探险游中文服务泰国旅游</p> 265 <br/> 266 <p>1-2月出发,网付立享¥1099/2人起!爆款位置有限,抢完即止!</p> 267 </div> 268 <div class="price"> 269 <p class="price_num"> 270 <span>¥</span> 271 <span>899</span> 272 <span>起</span> 273 </p> 274 <p><a href="route_detail.html">查看详情</a></p> 275 </div> 276 </li> 277 <li> 278 <div class="img"><img src="images/04-search_03.jpg" alt=""></div> 279 <div class="text1"> 280 <p>黑妞皇家旅行普吉岛攀牙湾大船星光之旅皮划艇日落休闲特色体验</p> 281 <br/> 282 <p>1-2月出发,网付立享¥1099/2人起!爆款位置有限,抢完即止!</p> 283 </div> 284 <div class="price"> 285 <p class="price_num"> 286 <span>¥</span> 287 <span>999</span> 288 <span>起</span> 289 </p> 290 <p><a href="route_detail.html">查看详情</a></p> 291 </div> 292 </li> 293 <li> 294 <div class="img"><img src="images/04-search_03.jpg" alt=""></div> 295 <div class="text1"> 296 <p>浪花朵朵旅行普吉岛皇帝岛珊瑚岛香蕉船拖拽伞水上项目</p> 297 <br/> 298 <p>1-2月出发,网付立享¥1099/2人起!爆款位置有限,抢完即止!</p> 299 </div> 300 <div class="price"> 301 <p class="price_num"> 302 <span>¥</span> 303 <span>99</span> 304 <span>起</span> 305 </p> 306 <p><a href="route_detail.html">查看详情</a></p> 307 </div> 308 </li> 309 <li> 310 <div class="img"><img src="images/04-search_03.jpg" alt=""></div> 311 <div class="text1"> 312 <p>环游记 泰国清迈Lila massage女子监狱spa 丽菈泰式按摩马杀鸡</p> 313 <br/> 314 <p>1-2月出发,网付立享¥1099/2人起!爆款位置有限,抢完即止!</p> 315 </div> 316 <div class="price"> 317 <p class="price_num"> 318 <span>¥</span> 319 <span>199</span> 320 <span>起</span> 321 </p> 322 <p><a href="route_detail.html">查看详情</a></p> 323 </div> 324 </li> 325 <li> 326 <div class="img"><img src="images/04-search_03.jpg" alt=""></div> 327 <div class="text1"> 328 <p>【减100元 含除夕/春节出发】广州增城三英温泉度假酒店/自由行套票</p> 329 <br/> 330 <p>1-2月出发,网付立享¥1099/2人起!爆款位置有限,抢完即止!</p> 331 </div> 332 <div class="price"> 333 <p class="price_num"> 334 <span>¥</span> 335 <span>899</span> 336 <span>起</span> 337 </p> 338 <p><a href="route_detail.html">查看详情</a></p> 339 </div> 340 </li> 341 <li> 342 <div class="img"><img src="images/04-search_03.jpg" alt=""></div> 343 <div class="text1"> 344 <p>【减100元 含除夕/春节出发】广州增城三英温泉度假酒店/自由行套票</p> 345 <br/> 346 <p>1-2月出发,网付立享¥1099/2人起!爆款位置有限,抢完即止!</p> 347 </div> 348 <div class="price"> 349 <p class="price_num"> 350 <span>¥</span> 351 <span>1199</span> 352 <span>起</span> 353 </p> 354 <p><a href="route_detail.html">查看详情</a></p> 355 </div> 356 </li> 357 <li> 358 <div class="img"><img src="images/04-search_03.jpg" alt=""></div> 359 <div class="text1"> 360 <p>泰国芭提雅三合一日游芭提雅蒂芬妮人妖秀成人门票bigeye含接送</p> 361 <br/> 362 <p>1-2月出发,网付立享¥1099/2人起!爆款位置有限,抢完即止!</p> 363 </div> 364 <div class="price"> 365 <p class="price_num"> 366 <span>¥</span> 367 <span>1589</span> 368 <span>起</span> 369 </p> 370 <p><a href="route_detail.html">查看详情</a></p> 371 </div> 372 </li> 373 </ul> 374 <div class="page_num_inf"> 375 <i></i> 共 376 <span id="totalPage">12</span>页<span id="totalCount">132</span>条 377 </div> 378 <div class="pageNum"> 379 <ul id="pageBar"> 380 <!--<li><a href="">首页</a></li>--> 381 <!--<li class="threeword"><a href="#">上一页</a></li>--> 382 <!--<li><a href="#">1</a></li>--> 383 <!--<li><a href="#">2</a></li>--> 384 <!--<li><a href="#">3</a></li>--> 385 <!--<li><a href="#">4</a></li>--> 386 <!--<li><a href="#">5</a></li>--> 387 <!--<li><a href="#">6</a></li>--> 388 <!--<li><a href="#">7</a></li>--> 389 <!--<li><a href="#">8</a></li>--> 390 <!--<li><a href="#">9</a></li>--> 391 <!--<li><a href="#">10</a></li>--> 392 <!--<li class="threeword"><a href="javascript:;">下一页</a></li>--> 393 <!--<li class="threeword"><a href="javascript:;">末页</a></li>--> 394 </ul> 395 </div> 396 </div> 397 <div class="right"> 398 <div class="top"> 399 <div class="hot">HOT</div> 400 <span>热门推荐</span> 401 </div> 402 <ul> 403 <li> 404 <div class="left"><img src="images/04-search_09.jpg" alt=""></div> 405 <div class="right"> 406 <p>清远新银盏温泉度假村酒店/自由行套...</p> 407 <p>网付价<span>¥<span>899</span>起</span> 408 </p> 409 </div> 410 </li> 411 <li> 412 <div class="left"><img src="images/04-search_09.jpg" alt=""></div> 413 <div class="right"> 414 <p>清远新银盏温泉度假村酒店/自由行套...</p> 415 <p>网付价<span>¥<span>899</span>起</span> 416 </p> 417 </div> 418 </li> 419 <li> 420 <div class="left"><img src="images/04-search_09.jpg" alt=""></div> 421 <div class="right"> 422 <p>清远新银盏温泉度假村酒店/自由行套...</p> 423 <p>网付价<span>¥<span>899</span>起</span> 424 </p> 425 </div> 426 </li> 427 <li> 428 <div class="left"><img src="images/04-search_09.jpg" alt=""></div> 429 <div class="right"> 430 <p>清远新银盏温泉度假村酒店/自由行套...</p> 431 <p>网付价<span>¥<span>899</span>起</span> 432 </p> 433 </div> 434 </li> 435 <li> 436 <div class="left"><img src="images/04-search_09.jpg" alt=""></div> 437 <div class="right"> 438 <p>清远新银盏温泉度假村酒店/自由行套...</p> 439 <p>网付价<span>¥<span>899</span>起</span> 440 </p> 441 </div> 442 </li> 443 </ul> 444 </div> 445 </div> 446 </div> 447 </div> 448 449 <!--引入头部--> 450 <div id="footer"></div> 451 <!--导入布局js,共享header和footer--> 452 <script type="text/javascript" src="js/include.js"></script> 453 </body> 454 455 </html>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 package cn.itcast.travel.web.servlet; 2 3 import cn.itcast.travel.domain.PageBean; 4 import cn.itcast.travel.domain.Route; 5 import cn.itcast.travel.service.RouteService; 6 import cn.itcast.travel.service.impl.RouteServiceImpl; 7 8 import javax.servlet.ServletException; 9 import javax.servlet.annotation.WebServlet; 10 import javax.servlet.http.HttpServlet; 11 import javax.servlet.http.HttpServletRequest; 12 import javax.servlet.http.HttpServletResponse; 13 import java.io.IOException; 14 import java.util.List; 15 16 @WebServlet("/route/queryPage") 17 public class RouteServlet extends BaseServlet { 18 RouteService routeService = new RouteServiceImpl(); 19 20 public void queryPage(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 21 //获取参数 22 String cid = request.getParameter("cid"); 23 String currentPage = request.getParameter("currentPage"); 24 String pageSize = request.getParameter("pageSize"); 25 26 //调用业务,查询 27 PageBean<Route> routePageBean = routeService.queryPage(currentPage, pageSize, cid); 28 29 //响应数据 30 writeValue(routePageBean, response); 31 } 32 33 }
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 package cn.itcast.travel.web.servlet; 2 3 import com.fasterxml.jackson.databind.ObjectMapper; 4 5 import javax.servlet.ServletException; 6 import javax.servlet.annotation.WebServlet; 7 import javax.servlet.http.HttpServlet; 8 import javax.servlet.http.HttpServletRequest; 9 import javax.servlet.http.HttpServletResponse; 10 import java.io.IOException; 11 import java.lang.reflect.InvocationTargetException; 12 import java.lang.reflect.Method; 13 14 //@WebServlet("/*") 15 public class BaseServlet extends HttpServlet { 16 @Override 17 protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 18 //获取uri 19 String uri = request.getRequestURI(); 20 System.out.println(uri); 21 22 //获取方法名称 23 String methodName = uri.substring(uri.lastIndexOf("/") + 1); 24 System.out.println(methodName); 25 26 //反射调用方法 27 try { 28 Method method = this.getClass().getDeclaredMethod(methodName, HttpServletRequest.class, HttpServletResponse.class); 29 method.invoke(this, request,response); 30 } catch (NoSuchMethodException e) { 31 e.printStackTrace(); 32 } catch (IllegalAccessException e) { 33 e.printStackTrace(); 34 } catch (InvocationTargetException e) { 35 e.printStackTrace(); 36 } 37 } 38 39 void writeValue(Object obj, HttpServletResponse response) throws IOException { 40 response.setContentType("application/json;charset=utf-8"); 41 new ObjectMapper().writeValue(response.getOutputStream(), obj); 42 } 43 44 String writeValueAsString(Object obj) throws IOException { 45 return new ObjectMapper().writeValueAsString(obj); 46 } 47 }
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 package cn.itcast.travel.service.impl; 2 3 import cn.itcast.travel.dao.RouteDao; 4 import cn.itcast.travel.dao.impl.RouteDaoImpl; 5 import cn.itcast.travel.domain.PageBean; 6 import cn.itcast.travel.domain.Route; 7 import cn.itcast.travel.service.RouteService; 8 import cn.itcast.travel.util.Constants; 9 10 import java.util.List; 11 12 public class RouteServiceImpl implements RouteService { 13 RouteDao routeDao = new RouteDaoImpl(); 14 @Override 15 public PageBean<Route> queryPage(String currentPageStr, String pageSizeStr, String cid) { 16 PageBean<Route> pb = new PageBean<>(); 17 18 int currentPage = 1; 19 if(currentPageStr != null && currentPageStr.length() > 0){ 20 currentPage = Integer.parseInt(currentPageStr); 21 } 22 23 int pageSize = Constants.DEFAULT_PAGESIZE; 24 if(pageSizeStr != null && pageSizeStr.length() > 0){ 25 pageSize = Integer.parseInt(pageSizeStr); 26 } 27 28 //当前页,页大小 29 pb.setCurrentPage(currentPage); 30 pb.setPageSize(pageSize); 31 32 //查询总记录数 33 int totalCount = routeDao.findTotalCount(cid); 34 if(totalCount == 0){ 35 //无记录 36 pb.setTotalCount(0); 37 pb.setTotalPage(0); 38 pb.setList(null); 39 return pb; 40 } 41 pb.setTotalCount(totalCount); 42 43 //总页数 44 pb.setTotalPage((int) Math.ceil(1.0 * totalCount / pageSize)); 45 46 //页数据 47 List<Route> routeList = routeDao.findByPage((currentPage - 1) * pageSize, pageSize, cid); 48 pb.setList(routeList); 49 50 return pb; 51 } 52 }
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 package cn.itcast.travel.service; 2 3 import cn.itcast.travel.domain.PageBean; 4 import cn.itcast.travel.domain.Route; 5 6 import java.util.List; 7 8 public interface RouteService { 9 10 /** 11 * 查询分页,某分类 12 * @param currentPage 13 * @param pageSize 14 * @param cid 15 * @return 16 */ 17 PageBean<Route> queryPage(String currentPage, String pageSize, String cid); 18 }
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 package cn.itcast.travel.dao; 2 3 import cn.itcast.travel.domain.Route; 4 5 import java.util.List; 6 7 public interface RouteDao { 8 /** 9 * 按分类查询总条数 10 * @param cid 分类id 11 * @return 12 */ 13 int findTotalCount(String cid); 14 15 16 List<Route> findByPage(int start, int size, String cid); 17 }
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 package cn.itcast.travel.dao.impl; 2 3 import cn.itcast.travel.dao.RouteDao; 4 import cn.itcast.travel.domain.Route; 5 import cn.itcast.travel.util.JDBCUtils; 6 import org.springframework.jdbc.core.BeanPropertyRowMapper; 7 import org.springframework.jdbc.core.JdbcTemplate; 8 9 import java.util.List; 10 11 public class RouteDaoImpl implements RouteDao { 12 JdbcTemplate jdbcTemplate = new JdbcTemplate(JDBCUtils.getDataSource()); 13 14 @Override 15 public int findTotalCount(String cid) { 16 String sql = "select count(*) from tab_route where cid=? "; 17 return jdbcTemplate.queryForObject(sql, Integer.class, cid); 18 } 19 20 @Override 21 public List<Route> findByPage(int start, int size, String cid) { 22 String sql = "select * from tab_route where cid=? limit ?,? "; 23 return jdbcTemplate.query(sql, new BeanPropertyRowMapper<>(Route.class), cid, start, size); 24 } 25 }