旅游线路模糊查询功能

功能说明

在首页搜索框输入线路关键字，点击搜索查询数据库，并将数据分页
样例展示

功能分析

注意：搜索功能将结合到分页功能上

1. 在点击搜索之后，需要携带关键词转跳转到route_list页面
2. route_list页面加载完成之后获取路径携带的关键词数据，发送ajcx请求，访问后台。
3. 后台在接收到数据之后，处理获取查找结果，将结果返回
4. 前端在获取结果之后，将数据填充到页面展示

代码实现

前端
搜索框

<script>
	function search(){
    
    
        var rname = $("#rname").val();
        location.href = "route_list.html?cid=0&rname="+ rname;
    }
</script>

<div class="search">
                    <input type="text" id="rname" name="rname" class="search_input" placeholder="请输入路线名称" autocomplete="off">
                    <a href="javascript:search()" class="search-button">搜索</a>
                </div>

<script>
        $(function(){
    
    
            var cid = getParameter("cid");
            var rname = getParameter("rname");
            load(cid,null,null,rname);
        });
        function load(cid,currentPage,pageSize,rname){
    
    
            $.post("route/pageQuery",{
    
    cid:cid,currentPage:currentPage,pageSize:pageSize,rname:rname},function(data){
    
    
                    var route_details = "";
                    for (var i = 0; i < data.list.length; i++) {
    
    
                        route_details += '<li>\n' +
                            '                <div class="img"><img src="' + data.list[i].rimage + '" height="169px"></div>\n' +
                            '                    <div class="text1">\n' +
                            '                    <p>' + data.list[i].rname + '</p>\n' +
                            '                <br/>\n' +
                            '                <p>' + data.list[i].routeIntroduce + '</p>\n' +
                            '                </div>\n' +
                            '                <div class="price">\n' +
                            '                    <p class="price_num">\n' +
                            '                    <span>&yen;</span>\n' +
                            '                <span>' + data.list[i].price + '</span>\n' +
                            '                <span>起</span>\n' +
                            '                </p>\n' +
                            '                <p><a href="route_detail.html">查看详情</a></p>\n' +
                            '                </div>\n' +
                            '              </li>';
                    }
                    $("#route_details").html(route_details);

                    var page_count = '<i></i> 共 <span>' + data.totalPage + '</span>页<span>' + data.totalCount + '</span>条';
                    $("#page_count").html(page_count);

                    var msg = '<li style="cursor:pointer;" οnclick="load(' + cid + ',' + 1 + ','+ data.pageSize +',\''+rname+'\')" ><a href="javascript:void()">首页</a></li>';
                    if (data.currentPage == 1) {
    
    
                        msg += '<li style="cursor: not-allowed;" οnclick="load(' + cid + ',' + (data.currentPage - 1) + ',' + data.pageSize + ',\''+rname+'\')" class="threeword"><a style="cursor: not-allowed;" href="javascript:void()">上一页</a></li>';
                    } else {
    
    
                        msg += '<li style="cursor:pointer;" οnclick="load(' + cid + ',' + (data.currentPage - 1) + ',' + data.pageSize + ',\''+rname+'\')" class="threeword"><a href="javascript:void()">上一页</a></li>';
                    }

                    var begin = 0;
                    var end = 0;
                    if ((data.currentPage - 5) <= 0) {
    
    
                        begin = 1;
                        end = 10;
                    } else if ((data.currentPage + 4) >= data.totalPage) {
    
    
                        end = data.totalPage;
                        begin = end - 9;
                    } else {
    
    
                        begin = data.currentPage - 5;
                        end = data.currentPage + 4;
                    }
                    if(data.totalPage <= 10 ){
    
    
                        begin = 1;
                        end = data.totalPage;
                    }
                    for (var i = begin; i <= end; i++) {
    
    
                        if (i == data.currentPage) {
    
    
                            msg += '<li style="cursor:pointer;" οnclick="load('+ cid +','+ i +','+ data.pageSize +',\''+rname+'\')" class="curPage"><a href="javascript:void()">' + i + '</a></li>';
                        } else {
    
    
                            msg += '<li style="cursor:pointer;" οnclick="load('+ cid +','+ i +','+ data.pageSize +',\''+rname+'\')"><a href="javascript:void()">' + i + '</a></li>';
                        }

                    }
                    if (data.currentPage == data.totalPage) {
    
    
                        msg += '<li style="cursor: not-allowed;" οnclick="load(' + cid + ',' + (data.currentPage + 1) + ',' + data.pageSize + ',\''+rname+'\')" class="threeword"><a style="cursor: not-allowed;" href="javascript:void()">下一页</a></li>';
                    } else {
    
    
                        msg += '<li  οnclick="load(' + cid + ',' + (data.currentPage + 1) + ',' + data.pageSize + ',\''+rname+'\')" class="threeword"><a href="javascript:void()">下一页</a></li>';
                    }

                    msg += '<li style="cursor:pointer;" οnclick="load(' + cid + ',' + data.totalPage + ',' + data.pageSize + ',\''+rname+'\')" class="threeword"><a href="javascript:void()">末页</a></li>';
                    $("#page_li").html(msg);
                    window.scrollTo(0, 0);
            });

        }
    </script>

后台
servlet

@WebServlet("/route/*")
public class RouteServlet extends BaseServlet {
    
    
    private RouteService routeService = new RouteServiceImpl();

    public void pageQuery(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    
    
        String cidStr = req.getParameter("cid");
        String currentPageStr = req.getParameter("currentPage");
        String pageSizeStr = req.getParameter("pageSize");
        String rname = req.getParameter("rname");
        rname = URLDecoder.decode(rname,"utf-8");
        int cid = 0;
        if(cidStr !=  null ||  currentPageStr.length() > 0){
    
    
            cid = Integer.parseInt(cidStr);
        }
        int currentPage = 1;
        if(currentPageStr != null && currentPageStr.length() > 0 && Integer.parseInt(currentPageStr) > 0){
    
    
            currentPage = Integer.parseInt(currentPageStr);
        }
        int pageSize = 5;
        if(pageSizeStr != null && pageSizeStr.length() > 0){
    
    
            pageSize = Integer.parseInt(pageSizeStr);
        }
        PageBean pageBean = routeService.pageQuery(cid, currentPage, pageSize,rname);//rname是搜索关键词
        writeValue(resp,pageBean);
    }
}

service

public class RouteServiceImpl implements RouteService {
    
    
    private RouteDao routeDao = new RouteDaoImpl();
    /**
     * 分页查询
     * @param currentPage
     * @param pageSize
     * @return
     */
    @Override
    public PageBean pageQuery(int cid,int currentPage, int pageSize,String rname) {
    
    
        PageBean pageBean = new PageBean();
        pageBean.setPageSize(pageSize);
        int totalCount = routeDao.findTotalCount(cid,rname);//加入rname做为查询条件
        pageBean.setTotalCount(totalCount);

        int totalPage = totalCount % pageSize == 0 ? totalCount / pageSize : (totalCount / pageSize) + 1;
        pageBean.setTotalPage(totalPage);
        if(currentPage > totalPage && totalPage != 0){
    
    
            currentPage = totalPage;
        }
        pageBean.setCurrentPage(currentPage);
        int start = (currentPage - 1) * pageSize;
        List<Route> routeList = routeDao.pageQuery(cid, start, pageSize,rname);//加入rname做为查询条件
        pageBean.setList(routeList);
        return pageBean;
    }
}

dao

public class RouteDaoImpl implements RouteDao {
    
    
    private JdbcTemplate template = new JdbcTemplate(JDBCUtils.getDataSource());

    /**
     * 查询总条数
     * @param cid
     * @return
     */
    @Override
    public int findTotalCount(int cid,String rname) {
    
    
    	//拼接sql查询语句
        String sql = "select count(rid) from tab_route where 1 = 1 ";
        StringBuilder sb = new StringBuilder(sql);
        List param = new ArrayList();
        if(cid != 0 ){
    
    
            sb.append(" and cid = ?");
            param.add(cid);
        }
        if(!"null".equals(rname) && rname != ""){
    
    
            sb.append(" and rname like ?");
            param.add("%"+ rname +"%");
        }
        sql = sb.toString();
        Integer count = template.queryForObject(sql, Integer.class,param.toArray());
        return count;
    }

    /**
     * 分页查询数据
     * @param cid
     * @param start
     * @param pageSize
     * @param rname
     * @return
     */
    @Override
    public List<Route> pageQuery(int cid,int start,int pageSize,String rname) {
    
    
        List<Route> routeList = null;
        try{
    
    
        	//拼接sql查询语句
            String sql = "select * from tab_route where 1 = 1 ";
            StringBuilder sb = new StringBuilder(sql);
            List param = new ArrayList();
            if(cid != 0){
    
    
                sb.append("and cid = ?");
                param.add(cid);
            }
            if(!"null".equals(rname) && rname.length() > 0){
    
    
                sb.append(" and rname like ?");
                param.add("%"+ rname +"%");
            }
            param.add(start);
            param.add(pageSize);
            sb.append(" limit ?,?");
            sql = sb.toString();
            routeList = template.query(sql, new BeanPropertyRowMapper<Route>(Route.class), param.toArray());
        }catch(Exception e){
    
    
            e.printStackTrace();
        }
        return routeList;
    }
}

因为代码比较多，很难简洁说明，但实现很简单，添加前端点击事件，修改ajax请求，修改dao查询语句。完成