黑马旅游网 ajax+html在前端实现页标签个数控制
2024-08-24 05:20:31
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>黑马旅游-搜索</title>
<link rel="stylesheet" type="text/css" href="css/common.css">
<link rel="stylesheet" href="css/search.css">
<style>
#pageBar>li{
cursor: pointer;
}
</style>
<script src="js/jquery-3.3.1.js"></script>
<script src="js/getParameter.js"></script>
<script>
$(function () {
/*
分类
*/
let cid = getParameter("cid");
//加载时根据cid查询
queryPage(cid);
}); function queryPage(cid, currentPage){
$.get("route/queryPage",{cid: cid, currentPage: currentPage}, function (pb) {
/*
显示分页条，首页上一页页码下一页末页，总页总条
*/
// <li class="threeword"><a href="#">上一页</a></li>
// <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> // alert(JSON.stringify(pb));
//总条
$("#totalCount").html(pb.totalCount);
//总页
$("#totalPage").html(pb.totalPage); // var lis;//必须初始化，不然与字符串相加，会将undefined加进去
var lis = ""; if(pb.totalPage != 0 && pb.currentPage != 1){//总页数不为0，并且当前页不是第1页，则显示首页上一页
//首页
var firstPage = '<li onclick="queryPage('+cid+', '+1+');"><a href="javascript: void(0);">首页</a></li>';
lis += firstPage; //上一页
var prePage = '<li onclick="queryPage('+cid+', '+ (pb.currentPage - 1) +');" class="threeword"><a href="javascript: void(0);">上一页</a></li>';
lis += prePage;
} //页标签个数控制 pageLinkCount, inLeft, leftOff, rightOff, startPage, endPage
var pageLinkCount = 5;//显示页标签个数
var inLeft = false;//当页标签为偶数时，当前页居左还是居右 var leftOff;
var rightOff;
// if(pageLinkCount % 2 != 0){
// //奇数个页标签
// leftOff = rightOff = pageLinkCount / 2;
// }else{
// //偶数个页标签
// if(inLeft){
// leftOff = pageLinkCount / 2 - 1;
// rightOff = pageLinkCount / 2;
// }else{
// leftOff = pageLinkCount / 2;
// rightOff = pageLinkCount / 2 + 1;
// }
// } leftOff = rightOff = Math.floor(pageLinkCount / 2);
if(pageLinkCount % 2 == 0){
inLeft ? leftOff-- : rightOff--;
} var startPage;
var endPage;
if(pb.totalPage < pageLinkCount){
//总页数小于页标签数
startPage = 1;
endPage = pb.totalPage;
}else{
//总页数大于页标签数
startPage = pb.currentPage - leftOff;
endPage = pb.currentPage + rightOff; if(startPage < 1){
startPage = 1;
endPage = pageLinkCount;
} if(endPage > pb.totalPage){
endPage = pb.totalPage;
startPage = pb.totalPage - pageLinkCount + 1;
}
} //页码
for (let i = startPage; i <= endPage; i++) {
if(i == pb.currentPage){
lis += '<li class="curPage" onclick="queryPage('+cid+', '+i+' );"><a href="javascript:void(0);">'+i+'</a></li>';
}else{
lis += '<li onclick="queryPage('+cid+', '+i+' );"><a href="javascript:void(0);">'+i+'</a></li>';
}
} if(pb.totalPage != 0 && pb.currentPage != pb.totalPage){
//下一页
var nextPage = '<li onclick="queryPage('+cid+', '+(pb.currentPage + 1)+' );" class="threeword"><a href="javascript: void(0);">下一页</a></li>';
lis += nextPage;
//末页
var lastPage = '<li onclick="queryPage('+cid+', '+pb.totalPage+' );"><a href="javascript: void(0);">末页</a></li>';
lis += lastPage;
} $("#pageBar").html(lis); /*
显示分页数据
*/
var routes = pb.list;
var routeLis = "";
if(routes){
for (let i = 0; i < routes.length; i++) {
routeLis += '<li>\n' +
' <div class="img"><img src="'+routes[i].rimage+'" alt=""></div>\n' +
' <div class="text1">\n' +
' <p>'+routes[i].rname+'</p>\n' +
' <br/>\n' +
' <p>'+routes[i].routeIntroduce+'</p>\n' +
' </div>\n' +
' <div class="price">\n' +
' <p class="price_num">\n' +
' <span>¥</span>\n' +
' <span>'+routes[i].price+'</span>\n' +
' <span>起</span>\n' +
' </p>\n' +
' <p><a href="route_detail.html?rid='+routes[i].rid+'">查看详情</a></p>\n' +
' </div>\n' +
'</li>'
}
}
$("#routeUL").html(routeLis); //滚动到顶部
// window.scrollTo(0, 0);
});
} function getQuery() {
let search = location.search;
// alert(search); //没有查询参数
let i = search.indexOf("?");
if( i == -1){
return {};
}; //去除问号
search = search.substring(i + 1); //得到参数
let result = {};
let items = search.split("&");
for(let item of items){
let split = item.split("=");
// alert(split[0]);
// alert(split[1]);
if(split[0]){
result[decodeURIComponent(split[0])] = decodeURIComponent(split[1]);
}
}
return result;
} function getQueryStringArgs(){
var qs=location.search.length ? location.search.substring(1) : "";
var args={};
var items=qs.length ? qs.split("&") : [];
var item=null,
name=null,
value=null,
len=items.length;
for(var i=0;i<len;i++){
item=items[i].split("=");
if(item[0].length){
name=decodeURIComponent(item[0]);
value=decodeURIComponent(item[1]);
args[name]=value;
}
}
return args;
} function getQueryArgs(){
let qs=location.search.length ? location.search.substring(1) : "";
let args={};
let items=qs.length ? qs.split("&") : []; for(let item of items){
let pair=item.split("=");
if(pair[0].length){
args[decodeURIComponent(pair[0])]= decodeURIComponent(pair[1]);
}
}
return args;
}
</script>
</head>
<body>
<!--引入头部-->
<div id="header"></div>
<div class="page_one">
<div class="contant">
<div class="crumbs">
<img src="data:images/search.png" alt="">
<p>黑马旅行><span>搜索结果</span></p>
</div>
<div class="xinxi clearfix">
<div class="left">
<div class="header">
<span>商品信息</span>
<span class="jg">价格</span>
</div>
<ul id="routeUL">
<li>
<div class="img"><img src="data:images/04-search_03.jpg" alt=""></div>
<div class="text1">
<p>【减100元 含除夕/春节出发】广州增城三英温泉度假酒店/自由行套票</p>
<br/>
<p>1-2月出发，网付立享￥1099/2人起！爆款位置有限，抢完即止！</p>
</div>
<div class="price">
<p class="price_num">
<span>¥</span>
<span>299</span>
<span>起</span>
</p>
<p><a href="route_detail.html">查看详情</a></p>
</div>
</li>
<li>
<div class="img"><img src="data:images/04-search_03.jpg" alt=""></div>
<div class="text1">
<p>浪花朵朵旅行普吉岛丛林飞跃空中飞人探险游中文服务泰国旅游</p>
<br/>
<p>1-2月出发，网付立享￥1099/2人起！爆款位置有限，抢完即止！</p>
</div>
<div class="price">
<p class="price_num">
<span>¥</span>
<span>899</span>
<span>起</span>
</p>
<p><a href="route_detail.html">查看详情</a></p>
</div>
</li>
<li>
<div class="img"><img src="data:images/04-search_03.jpg" alt=""></div>
<div class="text1">
<p>黑妞皇家旅行普吉岛攀牙湾大船星光之旅皮划艇日落休闲特色体验</p>
<br/>
<p>1-2月出发，网付立享￥1099/2人起！爆款位置有限，抢完即止！</p>
</div>
<div class="price">
<p class="price_num">
<span>¥</span>
<span>999</span>
<span>起</span>
</p>
<p><a href="route_detail.html">查看详情</a></p>
</div>
</li>
<li>
<div class="img"><img src="data:images/04-search_03.jpg" alt=""></div>
<div class="text1">
<p>浪花朵朵旅行普吉岛皇帝岛珊瑚岛香蕉船拖拽伞水上项目</p>
<br/>
<p>1-2月出发，网付立享￥1099/2人起！爆款位置有限，抢完即止！</p>
</div>
<div class="price">
<p class="price_num">
<span>¥</span>
<span>99</span>
<span>起</span>
</p>
<p><a href="route_detail.html">查看详情</a></p>
</div>
</li>
<li>
<div class="img"><img src="data:images/04-search_03.jpg" alt=""></div>
<div class="text1">
<p>环游记 泰国清迈Lila massage女子监狱spa 丽菈泰式按摩马杀鸡</p>
<br/>
<p>1-2月出发，网付立享￥1099/2人起！爆款位置有限，抢完即止！</p>
</div>
<div class="price">
<p class="price_num">
<span>¥</span>
<span>199</span>
<span>起</span>
</p>
<p><a href="route_detail.html">查看详情</a></p>
</div>
</li>
<li>
<div class="img"><img src="data:images/04-search_03.jpg" alt=""></div>
<div class="text1">
<p>【减100元 含除夕/春节出发】广州增城三英温泉度假酒店/自由行套票</p>
<br/>
<p>1-2月出发，网付立享￥1099/2人起！爆款位置有限，抢完即止！</p>
</div>
<div class="price">
<p class="price_num">
<span>¥</span>
<span>899</span>
<span>起</span>
</p>
<p><a href="route_detail.html">查看详情</a></p>
</div>
</li>
<li>
<div class="img"><img src="data:images/04-search_03.jpg" alt=""></div>
<div class="text1">
<p>【减100元 含除夕/春节出发】广州增城三英温泉度假酒店/自由行套票</p>
<br/>
<p>1-2月出发，网付立享￥1099/2人起！爆款位置有限，抢完即止！</p>
</div>
<div class="price">
<p class="price_num">
<span>¥</span>
<span>1199</span>
<span>起</span>
</p>
<p><a href="route_detail.html">查看详情</a></p>
</div>
</li>
<li>
<div class="img"><img src="data:images/04-search_03.jpg" alt=""></div>
<div class="text1">
<p>泰国芭提雅三合一日游芭提雅蒂芬妮人妖秀成人门票bigeye含接送</p>
<br/>
<p>1-2月出发，网付立享￥1099/2人起！爆款位置有限，抢完即止！</p>
</div>
<div class="price">
<p class="price_num">
<span>¥</span>
<span>1589</span>
<span>起</span>
</p>
<p><a href="route_detail.html">查看详情</a></p>
</div>
</li>
</ul>
<div class="page_num_inf">
<i></i> 共
<span id="totalPage">12</span>页<span id="totalCount">132</span>条
</div>
<div class="pageNum">
<ul id="pageBar">
<!--<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 class="right">
<div class="top">
<div class="hot">HOT</div>
<span>热门推荐</span>
</div>
<ul>
<li>
<div class="left"><img src="data:images/04-search_09.jpg" alt=""></div>
<div class="right">
<p>清远新银盏温泉度假村酒店/自由行套...</p>
<p>网付价<span>¥<span>899</span>起</span>
</p>
</div>
</li>
<li>
<div class="left"><img src="data:images/04-search_09.jpg" alt=""></div>
<div class="right">
<p>清远新银盏温泉度假村酒店/自由行套...</p>
<p>网付价<span>¥<span>899</span>起</span>
</p>
</div>
</li>
<li>
<div class="left"><img src="data:images/04-search_09.jpg" alt=""></div>
<div class="right">
<p>清远新银盏温泉度假村酒店/自由行套...</p>
<p>网付价<span>¥<span>899</span>起</span>
</p>
</div>
</li>
<li>
<div class="left"><img src="data:images/04-search_09.jpg" alt=""></div>
<div class="right">
<p>清远新银盏温泉度假村酒店/自由行套...</p>
<p>网付价<span>¥<span>899</span>起</span>
</p>
</div>
</li>
<li>
<div class="left"><img src="data:images/04-search_09.jpg" alt=""></div>
<div class="right">
<p>清远新银盏温泉度假村酒店/自由行套...</p>
<p>网付价<span>¥<span>899</span>起</span>
</p>
</div>
</li>
</ul>
</div>
</div>
</div>
</div> <!--引入头部-->
<div id="footer"></div>
<!--导入布局js，共享header和footer-->
<script type="text/javascript" src="js/include.js"></script>
</body> </html>
route_list.html
package cn.itcast.travel.web.servlet; import cn.itcast.travel.domain.PageBean;
import cn.itcast.travel.domain.Route;
import cn.itcast.travel.service.RouteService;
import cn.itcast.travel.service.impl.RouteServiceImpl; import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.List; @WebServlet("/route/queryPage")
public class RouteServlet extends BaseServlet {
RouteService routeService = new RouteServiceImpl(); public void queryPage(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//获取参数
String cid = request.getParameter("cid");
String currentPage = request.getParameter("currentPage");
String pageSize = request.getParameter("pageSize"); //调用业务，查询
PageBean<Route> routePageBean = routeService.queryPage(currentPage, pageSize, cid); //响应数据
writeValue(routePageBean, response);
} }
RouteServlet
package cn.itcast.travel.web.servlet; import com.fasterxml.jackson.databind.ObjectMapper; import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.lang.reflect.InvocationTargetException;
import java.lang.reflect.Method; //@WebServlet("/*")
public class BaseServlet extends HttpServlet {
@Override
protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//获取uri
String uri = request.getRequestURI();
System.out.println(uri); //获取方法名称
String methodName = uri.substring(uri.lastIndexOf("/") + 1);
System.out.println(methodName); //反射调用方法
try {
Method method = this.getClass().getDeclaredMethod(methodName, HttpServletRequest.class, HttpServletResponse.class);
method.invoke(this, request,response);
} catch (NoSuchMethodException e) {
e.printStackTrace();
} catch (IllegalAccessException e) {
e.printStackTrace();
} catch (InvocationTargetException e) {
e.printStackTrace();
}
} void writeValue(Object obj, HttpServletResponse response) throws IOException {
response.setContentType("application/json;charset=utf-8");
new ObjectMapper().writeValue(response.getOutputStream(), obj);
} String writeValueAsString(Object obj) throws IOException {
return new ObjectMapper().writeValueAsString(obj);
}
}
BaseServlet
package cn.itcast.travel.service.impl; import cn.itcast.travel.dao.RouteDao;
import cn.itcast.travel.dao.impl.RouteDaoImpl;
import cn.itcast.travel.domain.PageBean;
import cn.itcast.travel.domain.Route;
import cn.itcast.travel.service.RouteService;
import cn.itcast.travel.util.Constants; import java.util.List; public class RouteServiceImpl implements RouteService {
RouteDao routeDao = new RouteDaoImpl();
@Override
public PageBean<Route> queryPage(String currentPageStr, String pageSizeStr, String cid) {
PageBean<Route> pb = new PageBean<>(); int currentPage = 1;
if(currentPageStr != null && currentPageStr.length() > 0){
currentPage = Integer.parseInt(currentPageStr);
} int pageSize = Constants.DEFAULT_PAGESIZE;
if(pageSizeStr != null && pageSizeStr.length() > 0){
pageSize = Integer.parseInt(pageSizeStr);
} //当前页，页大小
pb.setCurrentPage(currentPage);
pb.setPageSize(pageSize); //查询总记录数
int totalCount = routeDao.findTotalCount(cid);
if(totalCount == 0){
//无记录
pb.setTotalCount(0);
pb.setTotalPage(0);
pb.setList(null);
return pb;
}
pb.setTotalCount(totalCount); //总页数
pb.setTotalPage((int) Math.ceil(1.0 * totalCount / pageSize)); //页数据
List<Route> routeList = routeDao.findByPage((currentPage - 1) * pageSize, pageSize, cid);
pb.setList(routeList); return pb;
}
}
RouteServiceImpl
package cn.itcast.travel.service; import cn.itcast.travel.domain.PageBean;
import cn.itcast.travel.domain.Route; import java.util.List; public interface RouteService { /**
* 查询分页，某分类
* @param currentPage
* @param pageSize
* @param cid
* @return
*/
PageBean<Route> queryPage(String currentPage, String pageSize, String cid);
}
RouteService
package cn.itcast.travel.dao;
import cn.itcast.travel.domain.Route;
import java.util.List;
public interface RouteDao {
/**
* 按分类查询总条数
* @param cid 分类id
* @return
*/
int findTotalCount(String cid);
List<Route> findByPage(int start, int size, String cid);
}
RouteDao
package cn.itcast.travel.dao.impl; import cn.itcast.travel.dao.RouteDao;
import cn.itcast.travel.domain.Route;
import cn.itcast.travel.util.JDBCUtils;
import org.springframework.jdbc.core.BeanPropertyRowMapper;
import org.springframework.jdbc.core.JdbcTemplate; import java.util.List; public class RouteDaoImpl implements RouteDao {
JdbcTemplate jdbcTemplate = new JdbcTemplate(JDBCUtils.getDataSource()); @Override
public int findTotalCount(String cid) {
String sql = "select count(*) from tab_route where cid=? ";
return jdbcTemplate.queryForObject(sql, Integer.class, cid);
} @Override
public List<Route> findByPage(int start, int size, String cid) {
String sql = "select * from tab_route where cid=? limit ?,? ";
return jdbcTemplate.query(sql, new BeanPropertyRowMapper<>(Route.class), cid, start, size);
}
}
RouteDaoImpl
最新文章
- CDN 技术详解（DNS，GSLB，Cache）
- Zabbix3.0 自动电话报障
- [转载]Emmet使用手册
- ie编程半天的学习总结
- c++模板实现抽象工厂
- Maven实战一
- 使用JMeter的HTTP代理服务器录制app脚本
- vscode断点调试简单的服务端文件
- 【JSOI2018】潜入行动
- MVC Json方法里的一个坑
- CF 1131C Birthday
- 斐讯面试记录—TCP滑动窗口及拥塞控制
- 什么是 Spring？
- 000 Python的运行
- DL_WITH_PY系统学习（第2章）
- python 字符串编码 str和unicode 区别以及相互转化 decode('utf-8') encode('utf-8')
- SSH 反向代理
- IDEA 导出maven项目所有的依赖包到指定的目录
- java poi给sheet表格中的某个单元格添加批注
- 【刷题】BZOJ 1977 [BeiJing2010组队]次小生成树 Tree