分享和讨论: 用ajax技术实现数据分页(含源代码)

先实现条头查询,进行分页,如第1页,第2页,建立第1,2页的div将第1页 ,第2页分别放入div 中,当点第1页时响应第1页的内容(ajax请求),,点第2页时先第1页隐常,再响应第2页ajax请求,这时当再次点第1页时,第2页隐常,第1页显示(避免重复请求).代码如下:还需修改..    请指教index.jsp<%@ page contentType="text/html; charset=UTF-8"%>
<%@ page language="java"%>
<%@ page import="java.sql.*,ajax.db.DBUtils"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>动态加载的FAQ</title><script type="text/javascript">
var xmlHttp;    //用于保存XMLHttpRequest对象的全局变量
var currFaqId;  //用于保存当前想要获取的FAQ编号
var leastId;//用于创建XMLHttpRequest对象
function createXmlHttp() {
    //根据window.XMLHttpRequest对象是否存在使用不同的创建方式
    if (window.XMLHttpRequest) {
       xmlHttp = new XMLHttpRequest();                  //FireFox、Opera等浏览器支持的创建方式
    } else {
       xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");//IE浏览器支持的创建方式
    }
}//获取FAQ信息的调用函数
function loadFAQ(faqId) {
 if(leastId!=faqId){
   if(leastId!=null)
   {
  var leastFaqDetail = getFaqDetailDiv(leastId);  
  leastFaqDetail.style.display = "none";  var leastFaqDetail2 = getFaqDetailDiv(leastId-1); 
  leastFaqDetail2.style.display = "none";
   }
      currFaqId = faqId;                              //记录当前想要获取的FAQ编号
      leastId=currFaqId;
      var currFaqDetail = getFaqDetailDiv(faqId);     //获取对应的faqDetail节点
      if (currFaqDetail.style.display == "none") {
        currFaqDetail.style.display = "block";      //设置div状态为“显示”        //判断FAQ详细信息是否已存在，如果不存在则从服务器获取
        if (currFaqDetail.innerHTML == "") {
            createXmlHttp();                        //创建XmlHttpRequest对象
            xmlHttp.onreadystatechange = loadFAQCallback;
            xmlHttp.open("GET", "read_faq.jsp?faqId=" + faqId, true);
            xmlHttp.send(null);
            //alert(faqId);
        }  
     } 
 }
    
}function loadFAQ2(faqId) {
 if(leastId!=faqId){
   if(leastId!=null)
   {
  //var leastFaqDetail = getFaqDetailDiv(leastId);  
  //leastFaqDetail.style.display = "none";
   }
      currFaqId = faqId;                              //记录当前想要获取的FAQ编号
      leastId=currFaqId;
      var currFaqDetail = getFaqDetailDiv(faqId);     //获取对应的faqDetail节点
      if (currFaqDetail.style.display == "none") {
        currFaqDetail.style.display = "block";      //设置div状态为“显示”        //判断FAQ详细信息是否已存在，如果不存在则从服务器获取
        if (currFaqDetail.innerHTML == "") {
            createXmlHttp();                        //创建XmlHttpRequest对象
            xmlHttp.onreadystatechange = loadFAQCallback;
            xmlHttp.open("GET", "read_faq.jsp?faqId=" + faqId, true);
            xmlHttp.send(null);
        }  
     } 
 }
    
}
//获取FAQ信息的回调函数
function loadFAQCallback() {
    if (xmlHttp.readyState == 4) {
        getFaqDetailDiv(currFaqId).innerHTML = xmlHttp.responseText;//将FAQ信息写入到对应的DIV中
        //alert(currFaqId);
    }
}//根据faqId取得对应的DIV节点
function getFaqDetailDiv(faqId) {
    return document.getElementById("faqDetail" + faqId);
}
</script>
</head><body><%
    int i=0;
    String sql = "select id, faq from faq order by id asc";   //定义查询数据库的SQL语句
    Connection conn = null;                 //声明Connection对象
    PreparedStatement pstmt = null;         //声明PreparedStatement对象
    ResultSet rs = null;                    //声明ResultSet对象
    ResultSet rs2 = null; 
    
    try {
        conn = DBUtils.getConnection();     //获取数据库连接
        pstmt = conn.prepareStatement(sql); //根据sql创建PreparedStatement
        rs = pstmt.executeQuery();          //执行查询，返回结果集
        while (rs.next()) { 
         //遍历结果集
            i++;
            %>
            <div>
                <a href="#" onclick="loadFAQ(<%=rs.getInt(1)%>);loadFAQ2(<%=rs.getInt(1)%>+1);return false;">
                    <%
                       if(i%2!=0) 
                       {
                    %>
                                                                   第 <%=rs.getInt(1)%>页
                    <%
                       }
                    %>   
                       
                </a>
            </div>
            <div id="faqDetail<%=rs.getInt(1)%>" style="display:none"></div>
            <%
        }
    } catch (SQLException e) {
        System.out.println(e.toString());
    } finally {
        DBUtils.close(rs);                  //关闭结果集
        DBUtils.close(pstmt);               //关闭PreparedStatement
        DBUtils.close(conn);                //关闭连接
    }
%><div align="right">总共有留言2页</div></body>
</html>read_faq.jsp<%@ page contentType="text/plain; charset=UTF-8"%>
<%@ page language="java"%>
<%@ page import="java.sql.*,ajax.db.DBUtils"%>
<%
    out.clear();                                    //清空当前的输出内容（空格和换行符）    String faqIdStr = request.getParameter("faqId");//获取faqId参数
    String faqDetail = null;                        //用于保存FAQ详细信息    if (faqIdStr != null) {
        int faqId = Integer.parseInt(faqIdStr);     //将获取的faqId参数转换为数字        String sql = "select detail from faq where id = ?"; //定义查询数据库的SQL语句
        Connection conn = null;                 //声明Connection对象
        PreparedStatement pstmt = null;         //声明PreparedStatement对象
        ResultSet rs = null;                    //声明ResultSet对象
        try {
            conn = DBUtils.getConnection();     //获取数据库连接
            pstmt = conn.prepareStatement(sql); //根据sql创建PreparedStatement
            pstmt.setInt(1, faqId);             //设置参数
            rs = pstmt.executeQuery();          //执行查询，返回结果集
            if (rs.next()) {
                faqDetail = rs.getString(1);
            }
        } catch (SQLException e) {
            System.out.println(e.toString());
        } finally {
            DBUtils.close(rs);                  //关闭结果集
            DBUtils.close(pstmt);               //关闭PreparedStatement
            DBUtils.close(conn);                //关闭连接
        }
    }    //根据faqDetail是否包含正确内容决定输出的信息
    if (faqDetail != null) {
        out.println(faqDetail);
    } else {
        out.println("无法获取FAQ详细信息");
    }
%>DBUtils.javapackage ajax.db;import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
import java.util.ResourceBundle;public class DBUtils {
 //private static final String OPTION_FILE_NAME = "ajax_db"; private static String drivers; private static String url; private static String user; private static String password;
 static {
  //ResourceBundle res = ResourceBundle.getBundle(OPTION_FILE_NAME);
  drivers = "oracle.jdbc.driver.OracleDriver";
  url = "jdbc:oracle:thin:@localhost:1521:ORACLE";
  user = "system";
  password = "shu";
 } public static Connection getConnection() throws SQLException {
  Connection conn = null;
  try {
   Class.forName(drivers).newInstance();
   conn = DriverManager.getConnection(url, user, password);
  } catch (Exception e) {
   e.printStackTrace();
  }
  if (conn == null) {
   throw new SQLException("ajax.DBUtils: Cannot get connection.");
  }
  return conn;
 } public static void close(Connection conn) {
  if (conn == null)
   return;
  try {
   conn.close();
  } catch (SQLException e) {
   System.out.println("ajax.DBUtils: Cannot close connection.");
  }
 } public static void close(Statement stmt) {
  try {
   if (stmt != null) {
    stmt.close();
   }
  } catch (SQLException e) {
   System.out.println("ajax.DBUtils: Cannot close statement.");
  } } public static void close(ResultSet rs) {
  try {
   if (rs != null) {
    rs.close();
   }
  } catch (SQLException e) {
   System.out.println("ajax.DBUtils: Cannot close resultset.");
  }
 }}数据表CREATE TABLE `faq` (
  `id` int(11) NOT NULL auto_increment,
  `faq` varchar(255) NOT NULL,
  `detail` varchar(255) NOT NULL,
  PRIMARY KEY  (`id`)
) 
根据数据库类型要修改本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/shuyoujian/archive/2009/08/12/4439387.aspx