Ajax特效动态加载的FAQ 之三

最新推荐文章于 2024-09-05 22:05:24 发布

wangzhanzhilv

最新推荐文章于 2024-09-05 22:05:24 发布

阅读量379

点赞数

文章标签： ajax xmlhttprequest function div null sql

本文链接：https://blog.csdn.net/wangzhanzhilv/article/details/4801321

版权

页面中显示了3个问题，分别编号为1、2、3。每个问题表现为一个超链接，单击超链接触发loadFAQ函数。每个问题下面包含一个用于显示答案的div，id属性设置为“faqDetail+问题编号”，通过style="display:none"默认设置为隐藏。详细的函数说明请参考代码中的注释。

<%@ page contentType="text/plain; charset=UTF-8"%>

<%@ page language="java"%>

<%@ page import="java.sql.*,ajax.db.DBUtils"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<head>

<title>动态加载的FAQ</title>

var xmlHttp; //用于保存XMLHttpRequest对象的全局变量

var currFaqId; //用于保存当前想要获取的FAQ编号

//用于创建XMLHttpRequest对象

function createXmlHttp() {

//根据window.XMLHttpRequest对象是否存在使用不同的创建方式

if (window.XMLHttpRequest) {

xmlHttp = new XMLHttpRequest(); //FireFox、Opera等浏览器支持的创建方式

} else {

xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); //IE浏览器支持的创建方式

}

//获取FAQ信息的调用函数

function loadFAQ(faqId) {

currFaqId = faqId; //记录当前想要获取的FAQ编号

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);

}

} else {

currFaqDetail.style.display = "none"; //设置div状态为“隐藏”

}

//获取FAQ信息的回调函数

function loadFAQCallback() {

if (xmlHttp.readyState == 4) {

//将FAQ信息写入到对应的div中

getFaqDetailDiv(currFaqId).innerHTML = xmlHttp.responseText;

}

//根据faqId取得对应的div节点

function getFaqDetailDiv(faqId) {

return document.getElementById("faqDetail" + faqId);

}

</script>

</head>

<body>

String sql = "select id, faq from faq order by id asc";//定义查询数据库的SQL语句

Connection conn = null; //声明Connection对象

PreparedStatement pstmt = null; //声明PreparedStatement对象

ResultSet rs = null; //声明ResultSet对象

try {

conn = DBUtils.getConnection(); //获取数据库连接

pstmt = conn.prepareStatement(sql); //根据sql创建PreparedStatement

rs = pstmt.executeQuery(); //执行查询，返回结果集

while (rs.next()) { //遍历结果集

<div>

<a href="#" οnclick="loadFAQ(<%=rs.getInt(1)%>);return false;">

<%=rs.getString(2)%>

</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); //关闭连接

}

</body>

</html>

wangzhanzhilv

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Ajax特效动态加载的FAQ 之三

页面中显示了3个问题，分别编号为1、2、3。每个问题表现为一个超链接，单击超链接触发loadFAQ函数。每个问题下面包含一个用于显示答案的div，id属性设置为“faqDetail+问题编号”，通过style="display:none"默认设置为隐藏。详细的函数说明请参考代码中的注释。动态加载的FAQ var xmlHttp; //
复制链接

扫一扫