Ajax分页查询实现-优快云博客

本文链接：https://blog.youkuaiyun.com/Melod_bc/article/details/51131972

Ajax查询分页

AjaxServlet

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import java.sql.*;

/**
 * @category 处理JSP页面提交的的异步查询请求，并以XML文件格式返回结果集
 */
public class AjaxServlet extends HttpServlet {
    private static final long   serialVersionUID    = 1L;
    public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        //当前页
        int currpage = Integer.parseInt(request.getParameter("currpage")==null?"1":request.getParameter("currpage"));
        //总的记录数
        int total = this.getResultCount();
        //分页单位
        int pagesize = 5;
        //Page类对象
        Page page = new Page(total,currpage,pagesize);
        //用于返回给前台页面的XML文档
        StringBuffer xmlDOM = new StringBuffer();
        //调用查询方法
        ResultSet rs = this.getResultSet(page.getStart(),page.getPagesize());
        //添加XML根节点
        xmlDOM.append("<root>");
        try {
            //添加数据库查询出来的数据
            xmlDOM.append("<persons>");
            while (rs.next()) {
                xmlDOM.append("<person>");
                xmlDOM.append("<pid>" + rs.getString("pid") + "</pid>");
                xmlDOM.append("<pname>" + rs.getString("pname") + "</pname>");
                xmlDOM.append("<age>" + rs.getString("age") + "</age>");
                xmlDOM.append("</person>");
            }
            rs.close();
            xmlDOM.append("</persons>");
        } catch (SQLException e) {
            System.out.println(e.getMessage());
        }
        //添加分页信息
        xmlDOM.append("<page>");
        xmlDOM.append("<currpage>"+page.getCurrpage()+"</currpage>");
        xmlDOM.append("<pagecount>"+page.getPagecount()+"</pagecount>");
        xmlDOM.append("</page>");
        xmlDOM.append("</root>");
        //调用打印方法
        this.print(request, response, xmlDOM.toString());

    }


    public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
            this.doGet(request, response);

    }

    /**
     * @category 打印出XMLDOM文档,用于前台页面的接收
     * @param request
     * @param response
     * @param xmlDOM
     * @throws IOException
     */
    private void print(HttpServletRequest request, HttpServletResponse response,String xmlDOM) throws IOException{
        response.setCharacterEncoding("utf-8");
        response.setContentType("text/xml");
        PrintWriter out = response.getWriter();
        out.print(xmlDOM);
        out.close();
    }

    /**
     * @category 返回当前页的查询结果
     * @param 行号
     * @param 长度
     * @return ResultSet
     */
    private ResultSet getResultSet(int start,int len){
        Connection conn = null;
        PreparedStatement pstmt = null;
        ResultSet rs = null;
        try {
            conn = getConn();
        } catch (ClassNotFoundException e) {
            System.out.println(e.getMessage());
        } catch (SQLException e) {
            System.out.println(e.getMessage());
        }


        String sql = "select * from (select * from person where pid > ? order by pid asc) where rownum <= "+len; 

        try {
            pstmt = conn.prepareStatement(sql);
            pstmt.setInt(1, start);
            rs = pstmt.executeQuery();
        } catch (SQLException e) {
            System.out.println(e.getMessage());
        }
        return rs;
    }

    /**
     * @return 数据库中总的记录数
     */
    private int getResultCount(){
        int count=0;
        Connection conn = null;
        Statement stmt = null;
        ResultSet rs = null;
        try {
            conn = getConn();
        } catch (ClassNotFoundException e) {
            System.out.println(e.getMessage());
        } catch (SQLException e) {
            System.out.println(e.getMessage());
        }
        String sql = "select count(*) from person";
        try {
            stmt = conn.createStatement();
            rs = stmt.executeQuery(sql);
        } catch (SQLException e) {
            System.out.println(e.getMessage());
        }
        try {
            while(rs.next()){
                count = rs.getInt(1);
            }
            stmt.close();
            rs.close();
            conn.close();
        } catch (SQLException e) {
            System.out.println(e.getMessage());
        }
        return count;
    }
    /**
     * @throws ClassNotFoundException
     * @throws SQLException
     */
    private Connection getConn() throws ClassNotFoundException, SQLException{

        String DRIVER = "oracle.jdbc.driver.OracleDriver";
        String URL = "jdbc:oracle:thin:@10.211.55.3:1521:orcl";
        final String USERNAME = "lizhi";
        final String PASSWORD = "lizhi";        
        Class.forName(DRIVER);
        return DriverManager.getConnection(URL,USERNAME,PASSWORD);
    }

}

Page


public class Page {

    //总记录数
    private int total;
    //当前页
    private int currpage;
    //每页显示记录数量
    private int pagesize;
    //总页数
    private int pagecount;
    //每页数据的开始下标
    private int start;

    public Page(int total, int currpage, int pagesize) {
        this.setTotal(total);
        this.setCurrpage(currpage);
        this.setPagesize(pagesize);
    }

    public int getTotal() {
        return total;
    }
    public void setTotal(int total) {
        this.total = total;
    }
    public int getCurrpage() {
        return currpage;
    }
    public void setCurrpage(int currpage) {
        this.currpage = currpage;
    }
    public int getPagesize() {
        return pagesize;
    }
    public void setPagesize(int pagesize) {
        this.pagesize = pagesize;
    }
    public int getPagecount() {
        //调用设置总页数方法
        this.setPagecount();
        return pagecount;
    }
    //设置总页数
    public void setPagecount(){
        this.pagecount = (total % pagesize == 0) ? total / pagesize : total / pagesize + 1;
    }
    public void setPagecount(int pagecount) {
        this.pagecount = pagecount;
    }
    public int getStart() {
        //调用设置行号方法
        this.setStart();
        return start;
    }
    //设置每页的起始行号
    public void setStart(){
        this.start = (this.getCurrpage()-1)*this.getPagesize();
    }
    public void setStart(int start) {
        this.start = start;
    }
}

index.jsp

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <script type="text/javascript">

    var js = {
        XMLHttp:null,
        //发送请求函数
        sendRequest:function(url,responseFun,callback){
            //创建XMLHTTPRequest对象
            (function(){

                //根据浏览器类型创建XMLHTTPRequest对象
                if(window.XMLHttpRequest){
                    js.XMLHttp = new XMLHttpRequest();
                }
                else{
                    try{
                        js.XMLHttp = new ActionXObject("Msxml2.XMLHTTP");
                    }catch (e){
                        try{
                            js.XMLHttp = new ActiveXObject("Microsoft.XMLHTTP");
                        } catch (e0){alert("Microsoft"+e0);}
                    }
                }

                })();

            js.XMLHttp.open("POST", url, true);
            js.XMLHttp.onreadystatechange = function(responseFunction){
                if(js.XMLHttp.readyState == 4){
                    if(js.XMLHttp.status == 200){
                        responseFun(js.XMLHttp);
                    }else{
                        document.getElementById("div").innerHTML = "<font color='red'>连接服务器异常...</font>"    ;
                    }
                }
                else{
                    //document.getElementById("div").innerHTML = "<font color='red'>数据加载中...</font>"    ;   
                }
            };//指定响应函数
            js.XMLHttp.send(null);
            return js.XMLHttp;
        }
    }





        //响应函数
        function responseFunction(xmlhttp){
            var xmlDOM = xmlhttp.responseXML; //接受服务器返回的xml文档
            parse(xmlDOM);//解析XML文档
        }

        //解析XML文档
        function parse(xmlDOM){
            var person = xmlDOM.getElementsByTagName("person");
            var page = xmlDOM.getElementsByTagName("page")[0];
            var currpage = page.getElementsByTagName("currpage")[0].firstChild.data;
            var pagecount = page.getElementsByTagName("pagecount")[0].firstChild.data; 
            var prevpagehtml; 
            var nextpagehtml;
            if((currpage-0)<=1){
                prevpagehtml = "<a>上一页</a>";
            }else{
                prevpagehtml = "<a onclick='AjaxTest("+(currpage-1)+");' href='javascript:void(0);'>上一页</a>";
            }
            if((currpage-0)<(pagecount-0)){
                nextpagehtml = "<a onclick='AjaxTest("+(currpage-0+1)+");' href='javascript:void(0);'>下一页</a>";
            }else{
                nextpagehtml = "<a>下一页</a>";
            }
            var html = "<table style='font-size: 12px; color: black'><tr><td width='80'>编号</td><td width='100'>姓名</td><td width='80'>年龄</td></tr>";

            for(i=0;i<person.length;i++){
                    html = html+ "<tr><td>"
                               +person[i].getElementsByTagName("pid")[0].firstChild.data+"</td><td>"
                               +person[i].getElementsByTagName("pname")[0].firstChild.data+"</td><td>"
                               +person[i].getElementsByTagName("age")[0].firstChild.data
                               +"</td></tr>";
            }
            html = html + "<tr ><td width='50'>"+prevpagehtml+"</td><td width='100'>共"+pagecount+"页&nbsp;当前第"+currpage+"页</td><td width='80'>"+nextpagehtml+"</td></tr>";
            html = html+"</table>";
            document.getElementById("div").innerHTML=html;
        }

        //主调函数,以当前页作为参数
        function AjaxTest(currpage) {
            js.sendRequest("AjaxServlet?currpage="+currpage,responseFunction,null);
        }

    </script>

    </head>

  <body onload="AjaxTest(1);">

    <center>

     <div id="div"> </div>

    </center>

  </body>
</html>