黑马旅游网 ajax+html在前端实现页标签个数控制
<!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
黑马旅游网 ajax+html在前端实现页标签个数控制的更多相关文章
- 黑马旅游网 ajax实现html页面共享
- Maven+JSP+Servlet+JDBC+Redis+Mysql实现的黑马旅游网
项目简介 项目来源于:https://gitee.com/haoshunyu/travel 本系统是基于Maven+JSP+Servlet+JdbcTemplate+Redis+Mysql实现的旅游网 ...
- 黑马旅游网配置 pom.xml
<?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://mave ...
- Linux上部署黑马旅游网Bug集锦
- 黑马旅游网案例 Bug集锦
- 黑马旅游网 解析url查询字符串
function getUrlParam(name) { let reg = new RegExp("(^|&)" + name + "=([^&]*)( ...
- 黑马旅游网 url-pattern不加斜杠报错 java.util.concurrent.ExecutioException: org.apache.catalina.LifecycleException
- 阶段2 JavaWeb+黑马旅游网_15-Maven基础_第5节 使用骨架创建maven的java工程_18maven的java工程取mysql数据库
使用maven创建ava功能,然后读取数据库做一个测试. 我们做的持久层,没有和页面有交互,只做一个java工程就可以了 创建的是java工程,用不用骨架都可以.这里不使用骨架,直接next 直接fi ...
- 阶段2 JavaWeb+黑马旅游网_15-Maven基础_第4节 maven生命周期和概念模型图_09maven概念模型图
项目自身的信息 项目运行所依赖的扎包 运行环境信息:tomcat啊,JDK啊这些都属于运行环境 一个jar包的坐标由三个最基本的信息组成. 第一部分就是依赖管理. 第二个部分
随机推荐
- 和菜鸟一起学android4.0.3源码之硬件gps简单移植【转】
本文转载自:http://blog.csdn.net/mwj19890829/article/details/18751447 关于Android定位方式 android 定位一般有四种方法,这四种方 ...
- interceptors
<mvc:interceptors> <mvc:interceptor> <mvc:mapping path="/**"/> <bean ...
- 51nod 1610
题目 神犇题解 所以说鄙人的姿势水平完全不够啊OTZ. 很naive的想法是O(T*v*m)的,据说卡一卡可以过去.题目要求的东西其实是这个: $ \sum\limits_{i = 1}^v {\mu ...
- iOS数据持久化存储之归档NSKeyedArchiver
归档是一种很常用的文件储存方法,几乎任何类型的对象都能够被归档储存(实际上是一种文件保存的形式),收集了网上的一些资料并结合自己的一些经验,总结如下. 一.使用archiveRootObject进行简 ...
- 浅析android中的依赖注入
这几年针对Android推出了不少View注入框架,例如ButterKnife.我们首先来了解一下使用这些框架有什么好处,其实好处很明显:它可以减少大量的findViewById以及setOnClic ...
- php设计模式课程---9、桥接模式是什么
php设计模式课程---9.桥接模式是什么 一.总结 一句话总结: 一个类没干完,另外一个类接着给它干完 实质是类的拼接,也就是用类的组合代替了类的继承,因为类的组合可以有很多种方式,所以桥接就是类的 ...
- python学习笔记：第六天（流程控制语句）
Python3 条件控制 1.if 语句 <1> 一般形式 Python中if语句的一般形式如下所示: if condition_1: statement_block_1 elif con ...
- 【thrift】vc中使用thrift中文字符串乱码问题解决
问题描述: VC中使用Apache thrift时,如果字符串中包含中文,会出现乱码问题,这个问题的原因是由于thrift为了达到跨语言交互而使用了UTF-8格式发送字符串,这点对java或者C#不会 ...
- 如何快速批量修改ArcGIS中的图层设置
在ArcGIS中作图的时候,我们通常需要设置图层的颜色和粗细.点击图层的颜色,会跳出以下符号选择器: 右侧即可修改我们需要的属性. 但是我们有多个类似的属性如何修改成统一的样式呢? 鼠标图层右键,选择 ...
- MySQL交叉表处理_20160923
交叉表处理,在二维表中例如下面表 想把年月字段放到列字段,在sql中可以使用sum(if(条件,求和字段,null)) 函数来进行行列的转置 1.首先是上篇的年月字段在一列 SELECT city A ...