html通过Ajax异步交互实现分页

ゞ浴缸里的玫瑰 2021-12-15 22:39 370阅读 0赞

## 模拟百度分页（前5后4） ##

1.  定义一个页面的JavaBean，作为数据传输对象（DTO）

public class PageBean<T> { 
        private int totalCount; //总记录数
        private int totalPage;  //总页数
        private int currentPage;//当前页码
        private int pageSize;   //每页显示的条数
        private List<T> list;   //每页要显示的数据
    
        public int getTotalCount() { 
            return totalCount;
        }
    
        public void setTotalCount(int totalCount) { 
            this.totalCount = totalCount;
        }
    
        public int getTotalPage() { 
            return totalPage;
        }
    
        public void setTotalPage(int totalPage) { 
            this.totalPage = totalPage;
        }
    
        public int getCurrentPage() { 
            return currentPage;
        }
    
        public void setCurrentPage(int currentPage) { 
            this.currentPage = currentPage;
        }
    
        public int getPageSize() { 
            return pageSize;
        }
    
        public void setPageSize(int pageSize) { 
            this.pageSize = pageSize;
        }
    
        public List<T> getList() { 
            return list;
        }
    
        public void setList(List<T> list) { 
            this.list = list;
        }
    }

1.  JS代码部分,通过Ajax技术把当前页码，与显示条数数传给后台，后台把呈现在页面的数据传回来，动态在页面显示，定义一个load方法，用于加载页面的

1.  定义一个servlet，用于接收当前页码，显示条数，查询出一个PageBean对象序列化为JSON数据传到前台

//分页Servlet
    @WebServlet("/pageQueryServlet")
    public class PageQueryServlet extends HttpServlet { 
        protected void doPost(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");
            //2.处理参数
            int cid=0;
            if(cidStr!=null&&cidStr.length()>0&& !"null".equals(cidStr)){ 
                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对象
            RouteService service=new RouteServiceImpl();
            PageBean<Route> pb = service.pageQuery(cid, currentPage, pageSize,rname);
            //4.将PageBean对象序列化为json然后返回给html
            ObjectMapper mapper=new ObjectMapper();
            response.setContentType("application/json;charset=utf-8");
            mapper.writeValue(response.getOutputStream(),pb);
        }
    
        protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 
        doPost(request,response);
        }
    }

1.  效果显示  
    ![在这里插入图片描述][2019070312460572.png]

[2019070312460572.png]: /images/20211215/0a180d9cdc8f4545aaf75a993e3ba7ec.png