1.1.2 数据库设计
本实例使用名为faq的数据库表，包含的数据如图1.2所示。具体的创建数据表语句如下：
CREATE TABLE 'faq' (
'id' int(11) NOT NULL auto_increment,
'faq' varchar(255) NOT NULL,
'detail' varchar(255) NOT NULL,
PRIMARY KEY ('id')
)
|
 |
| 图1.2 表faq包含的数据 |
主要包括两个文件：用户操作界面index.jsp和服务器端响应文件read_faq.jsp。
1.1.3 用户操作界面index.jsp
页面中显示了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>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<script type="text/javascript">
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>
<h1>FAQ（常见问题）</h1>
<%
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="#" onclick="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>
| 回书目 上一节 下一节 |
|
· Linux笔试面试题选摘测.. · 08年5月软考网管上午真.. · 性能测试从零开始 目录 · 08年5月软考网工上午真.. · 上周拒绝服务攻击（DDo.. · 08年5月各大网上书店及.. |
· 2008年5月24日软考试题.. · 软件设计师专家临考模.. · 上周网络管理员专家自.. · 网络工程师自测获奖名.. · 08年4月各大网上书店及.. · 系统分析师自测获奖名.. |
|
|||
| 名称：SQL Server数据库管理精品黄皮书 简介：书中文章经过精挑细选，便于用户能根据自己的实际工作和学习，快速在本书寻找到相关资料。内容涵盖了SQL Server的安装与升级、语句查询、数据备份和恢复、自动化任务、数据同步、数据字典、安全和预防、性能和优化、集群等各方面应用信息，以及DBA管理人员在数据库管理工作中 |
|||
| 名称：2007路由技术大全 简介：《2007路由技术大全》由51CTO.com网站特别策划制作，该书包括路由器技术、路由器产品、路由器配置、安全设置、路由器故障处理、路由器密码恢复，以及广大网友在实践使用中的心得经验和技巧文章，内容注重实用性，适用于初学者入门，也适合多年从业者提高，是一本实践和理论完 |
|||
| 名称：网络安全精品应用黄皮书 简介：《2007精品网络安全黄皮书》包括了9个大类24个小类， 800余篇文章，内容包含了熊猫烧香病毒、DDOS攻击、ARP病等热点问题的介绍及解决方案。从病毒查杀、防范、系统、数据等各方面的安全设置到黑客技术的了解、防范，涉及到了安全应用的全部领域, 由浅至深内容全面。 |
|
||||
| · SOA 面向服务架构 · SQL Server 2008/2005.. · Apache技术专题 · 三层交换技术专题 · SQL Server入门到精通 · Apache技术专题 · Windows集群服务应用 · 国际文档格式标准开战 |
· 路由器设置与口令恢复 · Linux 集群技术专题 · PHP开发应用手册 · SOA 面向服务架构 · 企业数据恢复指南 · 了解统一威胁管理(UTM).. · 专题：AIX操作系统管理.. · 访问控制列表(ACL)介绍 |
|||
|
||||
| · SQL Server入门到精通 · SQL Server 2008/2005.. · SOA 面向服务架构 · Apache技术专题 · 三层交换技术专题 · Apache技术专题 · 企业数据恢复指南 · Windows集群服务应用 |
· 路由器设置与口令恢复 · Linux 集群技术专题 · SOA 面向服务架构 · 了解统一威胁管理(UTM).. · 反垃圾邮件技术应用 · 访问控制列表(ACL)介绍 · ASP.NET开发教程 · PHP开发应用手册 |
|||
