失眠网 > 7. 黑马旅游网——旅游线路的名称查询

7. 黑马旅游网——旅游线路的名称查询

时间：2020-10-15 15:45:01

相关推荐

7. 黑马旅游网——旅游线路的名称查询

12.旅游线路名称查询

12.1 查询参数的传递

在header.html中

$("#search-button").click(function () {//线路名称var rname = $("#search_input").val();var cid = getParameter("cid");// 跳转路径 http://localhost/travel/route_list.html?cid=5，拼接上rname=xxxlocation.href="http://localhost/travel/route_list.html?cid="+cid+"&rname="+rname;});

在route_list.html

var cid = getParameter("cid");//获取rname的参数值var rname = getParameter("rname");//判断rname如果不为null或者""if(rname){//url解码rname = window.decodeURIComponent(rname);}

12.2 修改后台代码

Servlet

@WebServlet("/route/*")public class RouteServlet extends BaseServlet {private RouteService routeService = new RouteServiceImpl();/*** 分页查询* @param request* @param response* @throws ServletException* @throws IOException*/public void pageQuery(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {//1.接受参数String currentPageStr = request.getParameter("currentPage");String pageSizeStr = request.getParameter("pageSize");String cidStr = request.getParameter("cid");//接受rname 线路名称String rname = request.getParameter("rname");rname = new String(rname.getBytes("iso-8859-1"),"utf-8");int cid = 0;//类别id//2.处理参数if(cidStr != null && cidStr.length() > 0){cid = Integer.parseInt(cidStr);}int currentPage = 0;//当前页码，如果不传递，则默认为第一页if(currentPageStr != null && currentPageStr.length() > 0){currentPage = Integer.parseInt(currentPageStr);}else{currentPage = 1;}int pageSize = 0;//每页显示条数，如果不传递，默认每页显示5条记录if(pageSizeStr != null && pageSizeStr.length() > 0){pageSize = Integer.parseInt(pageSizeStr);}else{pageSize = 5;}//3. 调用service查询PageBean对象PageBean<Route> pb = routeService.pageQuery(cid, currentPage, pageSize,rname);//4. 将pageBean对象序列化为json，返回writeValue(pb,response);}}

Service

public PageBean<Route> pageQuery(int cid, int currentPage, int pageSize,String rname ) {//封装PageBeanPageBean<Route> pb = new PageBean<Route>();//设置当前页码pb.setCurrentPage(currentPage);//设置每页显示条数pb.setPageSize(pageSize);//设置总记录数int totalCount = routeDao.findTotalCount(cid,rname);pb.setTotalCount(totalCount);//设置当前页显示的数据集合int start = (currentPage - 1) * pageSize;//开始的记录数List<Route> list = routeDao.findByPage(cid,start,pageSize,rname);pb.setList(list);//设置总页数 = 总记录数/每页显示条数int totalPage = totalCount % pageSize == 0 ? totalCount / pageSize :(totalCount / pageSize) + 1 ;pb.setTotalPage(totalPage);return pb;}

Dao

@Overridepublic int findTotalCount(int cid,String rname) {//String sql = "select count(*) from tab_route where cid = ?";//1.定义sql模板String sql = "select count(*) from tab_route where 1=1 ";StringBuilder sb = new StringBuilder(sql);List params = new ArrayList();//条件们//2.判断参数是否有值if(cid != 0){sb.append( " and cid = ? ");params.add(cid);//添加？对应的值}if(rname != null && rname.length() > 0){sb.append(" and rname like ? ");params.add("%"+rname+"%");}sql = sb.toString();return template.queryForObject(sql,Integer.class,params.toArray());}@Overridepublic List<Route> findByPage(int cid, int start, int pageSize,String rname) {//String sql = "select * from tab_route where cid = ? and rname like ? limit ? , ?";String sql = " select * from tab_route where 1 = 1 ";//1.定义sql模板StringBuilder sb = new StringBuilder(sql);List params = new ArrayList();//条件们//2.判断参数是否有值if(cid != 0){sb.append( " and cid = ? ");params.add(cid);//添加？对应的值}if(rname != null && rname.length() > 0){sb.append(" and rname like ? ");params.add("%"+rname+"%");}sb.append(" limit ? , ? ");//分页条件sql = sb.toString();params.add(start);params.add(pageSize);return template.query(sql,new BeanPropertyRowMapper<Route>(Route.class),params.toArray());}

12.3 修改前台代码

$(function () {/* var search = location.search;//alert(search);//?id=5// 切割字符串，拿到第二个值var cid = search.split("=")[1];*///获取cid的参数值var cid = getParameter("cid");//获取rname的参数值var rname = getParameter("rname");//判断rname如果不为null或者""if(rname){//url解码rname = window.decodeURIComponent(rname);}//当页码加载完成后，调用load方法，发送ajax请求加载数据load(cid,null,rname);});function load(cid ,currentPage,rname){//发送ajax请求，请求route/pageQuery,传递cid$.get("route/pageQuery",{cid:cid,currentPage:currentPage,rname:rname},function (pb) {//解析pagebean数据，展示到页面上//1.分页工具条数据展示//1.1 展示总页码和总记录数$("#totalPage").html(pb.totalPage);$("#totalCount").html(pb.totalCount);/*<li><a href="">首页</a></li><li class="threeword"><a href="#">上一页</a></li><li class="curPage"><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>*/var lis = "";var fristPage = '<li οnclick="javascipt:load('+cid+',1,\''+rname+'\')"><a href="javascript:void(0)">首页</a></li>';//计算上一页的页码var beforeNum = pb.currentPage - 1;if(beforeNum <= 0){beforeNum = 1;}var beforePage = '<li οnclick="javascipt:load('+cid+','+beforeNum+',\''+rname+'\')" class="threeword"><a href="javascript:void(0)">上一页</a></li>';lis += fristPage;lis += beforePage;//1.2 展示分页页码/*1.一共展示10个页码，能够达到前5后4的效果2.如果前边不够5个，后边补齐10个3.如果后边不足4个，前边补齐10个*/// 定义开始位置begin,结束位置 endvar begin; // 开始位置var end ; // 结束位置//1.要显示10个页码if(pb.totalPage < 10){//总页码不够10页begin = 1;end = pb.totalPage;}else{//总页码超过10页begin = pb.currentPage - 5 ;end = pb.currentPage + 4 ;//2.如果前边不够5个，后边补齐10个if(begin < 1){begin = 1;end = begin + 9;}//3.如果后边不足4个，前边补齐10个if(end > pb.totalPage){end = pb.totalPage;begin = end - 9 ;}}for (var i = begin; i <= end ; i++) {var li;//判断当前页码是否等于iif(pb.currentPage == i){li = '<li class="curPage" οnclick="javascipt:load('+cid+','+i+',\''+rname+'\')"><a href="javascript:void(0)">'+i+'</a></li>';}else{//创建页码的lili = '<li οnclick="javascipt:load('+cid+','+i+',\''+rname+'\')"><a href="javascript:void(0)">'+i+'</a></li>';}//拼接字符串lis += li;}/* for (var i = 1; i <= pb.totalPage ; i++) {var li;//判断当前页码是否等于iif(pb.currentPage == i){li = '<li class="curPage" οnclick="javascipt:load('+cid+','+i+')"><a href="javascript:void(0)">'+i+'</a></li>';}else{//创建页码的lili = '<li οnclick="javascipt:load('+cid+','+i+')"><a href="javascript:void(0)">'+i+'</a></li>';}//拼接字符串lis += li;}*/var lastPage = '<li class="threeword"><a href="javascript:;">末页</a></li>';var nextPage = '<li class="threeword"><a href="javascript:;">下一页</a></li>';lis += nextPage;lis += lastPage;//将lis内容设置到 ul$("#pageNum").html(lis);/*<li><div class="img"><img src="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>*///2.列表数据展示var route_lis = "";for (var i = 0; i < pb.list.length; i++) {//获取{rid:1,rname:"xxx"}var route = pb.list[i];var li = '<li>\n' +' <div class="img"><img src="'+route.rimage+'" style="width: 299px;"></div>\n' +' <div class="text1">\n' +' <p>'+route.rname+'</p>\n' +' <br/>\n' +' <p>'+route.routeIntroduce+'</p>\n' +' </div>\n' +' <div class="price">\n' +' <p class="price_num">\n' +' <span>¥</span>\n' +' <span>'+route.price+'</span>\n' +' <span>起</span>\n' +' </p>\n' +' <p><a href="route_detail.html">查看详情</a></p>\n' +' </div>\n' +'</li>';route_lis += li;}$("#route").html(route_lis);//定位到页面顶部window.scrollTo(0,0);});}