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

Marty束 2009-08-12 05:39:43

先实现条头查询,进行分页,如第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.java

package 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

...全文