效果图为:

======================================================点击超级链接效果为==============

数据库设计
create table faq(
id int(11) not null auto_increment,
faq varchar(255) not null,
detail varchar(255) not null,
primary key (id));
插入以下数据
mysql> select * from faq;
+----+-----------+-----------------------+
| id | faq | detail |
+----+-----------+-----------------------+
| 1 | 常见问题1 | <p>问题详细内容</p> |
| 2 | 常见问题2 | <p>问题二详细内容</p> |
| 3 | 常见问题3 | <p>问题三详细内容</p> |
cn.java.DB 则指的是连接的数据库
package
cn.java;

import
java.sql.Connection;
import
java.sql.DriverManager;
import
java.sql.PreparedStatement;
import
java.sql.ResultSet;
import
java.sql.SQLException;
import
java.sql.Statement;
import
java.util.logging.Level;
import
java.util.logging.Logger;
import
javax.naming.Context;
import
javax.naming.InitialContext;
import
javax.naming.NamingException;
import
javax.sql.DataSource;



/** */
/**
*
* @author he
*/

public
class
DB
...
{

static...{

try...{
Class.forName("com.mysql.jdbc.Driver");

}catch(Exception e)...{
e.getStackTrace();
}
}

/** *//**
* public static void getConnection()
*
* 由于已经有了连接池DataPool
* 则可以直接使用getDataPool()获得数据源ds
* ds.getConnection();由于在建立连接池的时候
* 采用的是mySql 用户名root,密码root都已经添加过了,所以没有必要再使用
* getConnection(String url,String name,String password);来获得连接
*
*/
//获得连接

public static Connection getConnection()...{
DataSource ds = null;
Connection conn = null;
String url="jdbc:mysql://127.0.0.1/test";
String name="root";
String password="root";

try ...{
// ds = getDataPool();
conn=DriverManager.getConnection(url,name,password);

} catch (SQLException ex) ...{
Logger.getLogger(DB.class.getName()).log(Level.SEVERE, null, ex);
}
return conn;
}

/** *//**
* 建立数据源名字为DataPool
* 也就是所谓的连接池。
*/

private static DataSource getDataPool() throws NamingException ...{
Context c = new InitialContext();
return (DataSource) c.lookup("java:comp/env/DataPool");
}

/** *//**
* 创建Statement类的对象
*/

public static Statement getStmt(Connection conn)...{
Statement stmt = null;

try ...{
stmt = conn.createStatement();

} catch (SQLException ex) ...{
Logger.getLogger(DB.class.getName()).log(Level.SEVERE, null, ex);
}
return stmt;
}

/** *//**
* 查询语句的结果集
*/

public static ResultSet executeQuery(Statement stmt,String sql)...{
ResultSet rs = null;

try ...{
rs = stmt.executeQuery(sql);

} catch (SQLException ex) ...{
Logger.getLogger(DB.class.getName()).log(Level.SEVERE, null, ex);
}
return rs;
}

/** *//**
更新语句的执行
*
*/

public static void executeUpdate(Statement stmt,String sql)...{

try ...{
stmt.executeUpdate(sql);

} catch (SQLException ex) ...{
Logger.getLogger(DB.class.getName()).log(Level.SEVERE, null, ex);
}
}

/** *//**
* PreparedStatement prepareStatement(String sql,int autoGeneratedKeys)
*
* 创建一个默认 PreparedStatement 对象,该对象能获取自动生成的键。
*
* 获得可动态执行SQL语句的接口(带有自动生成键的)
*
*/
public static PreparedStatement prepareKey(Connection conn,String sql,

int autoGeneratedKey)...{
PreparedStatement pstmt = null;

try ...{
pstmt = conn.prepareStatement(sql, autoGeneratedKey);

} catch (SQLException ex) ...{
Logger.getLogger(DB.class.getName()).log(Level.SEVERE, null, ex);
}
return pstmt;
}

/** *//**
* 获得PreparedStatement 对象
*/

public static PreparedStatement prepareStmt(Connection conn,String sql)...{
PreparedStatement pstmt = null;

try ...{
pstmt = conn.prepareStatement(sql);

} catch (SQLException ex) ...{
Logger.getLogger(DB.class.getName()).log(Level.SEVERE, null, ex);
}
return pstmt;
}

/** *//**
* 设置统一关闭方法
*/

public static void close(Connection conn, Statement stmt, ResultSet rs) ...{

try ...{


if (rs != null) ...{
rs.close();
rs = null;
}


if (stmt != null) ...{
stmt.close();
stmt = null;
}


if (conn != null) ...{
conn.close();
conn = null;
}


} catch (SQLException e) ...{
e.printStackTrace();
}

}
}
// 用户操作界面 index.jsp
<%
@page contentType
=
"
text/plain; charset=UTF-8
"
%>
<%
@page language
=
"
java
"
%>
<%
@page import
=
"
java.sql.*
"
%>
<%
@page import
=
"
cn.java.DB
"
%>

<!
DOCTYPE HTML PUBLIC
"
-//W3C//DTD HTML 4.01 Transitional//EN
"
"
http://www.w3.org/TR/html4/loose.dtd
"
>

<
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编号
//
用于创建XMLHttpRequest 对象

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

if(window.XMLHttpRequest)...{
xmlHttp=new XMLHttpRequest(); //FireFox ,opera 等浏览器支持的创建方式

}else...{
xmlHttp=new ActiveObject("Microsoft.XMLHTTP");//IE 浏览器支持的创建方式
}
}
//
获取FAQ信息的调用函数

function
loadFAQ(faqId)
...
{
currFaqId=faqId;
var currFaqDetail=getFaqDetailDiv(faqId); //获取对应的faqDetail节点
//判断FAQ详细信息是否已存在,入伙不存在则从服务器获取

if(currFaqDetail.style.display=="none")...{
currFaqDetail.style.display="block";//设置div状态为“显示”

if(currFaqDetail.innerHTML=="")...{
createXmlHttp();
xmlHttp.onreadystatechange=loadFAQCallback;
xmlHttp.open("GET","read_faq.jsp?faqId="+faqId,true);
xmlHttp.send(null);
}

}else...{
currFaqDetail.style.display="none"; //设置div 状态为“隐藏”
}
}
//
获取faqId 信息的回调函数

function
loadFAQCallback()
...
{

if(xmlHttp.readyState==4)...{
//将FAQ 信息写入到对应的DIV
getFaqDetailDiv(currFaqId).innerHTML=xmlHttp.responseText;

}
}


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
;
PreparedStatement pstmt
=
null
;
ResultSet rs
=
null
;

try
...
{
conn= DB.getConnection();
pstmt=conn.prepareStatement(sql);
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
...
{
DB.close(conn, pstmt, rs);
}
%>
</
body
>
</
html
>
//服务器端响应文件 read_faq.jsp
<%
@page contentType
=
"
text/plain; charset=UTF-8
"
%>
<%
@page language
=
"
java
"
%>
<%
@page import
=
"
java.sql.*
"
%>
<%
@page import
=
"
cn.java.DB
"
%>
<%

out.clear();
//
清空当前的输出内容(空格和换行符)
String faqIdStr
=
request.getParameter(
"
faqId
"
);

String faqDetail
=
null
;
//
用于保存FAQ 详细信息

if
(faqIdStr
!=
null
)
...
{
int faqId=Integer.parseInt(faqIdStr);
String sql="select detail from faq where id=?";
Connection conn=null;
PreparedStatement pstmt=null;
ResultSet rs=null;

try...{
conn= DB.getConnection();
pstmt=conn.prepareStatement(sql);
pstmt.setInt(1,faqId);
rs=pstmt.executeQuery();

if(rs.next())...{
faqDetail=rs.getString(1);
}

}catch(SQLException e)...{
System.out.println(e.toString());

}finally...{
DB.close(conn, pstmt, rs);
}
}

//
根据faqDetail 是否包含正确内容 决定输出的信息

if
(faqDetail
!=
null
)
...
{
out.println("详细内容:"+faqDetail);

}
else
...
{
out.println("无法获取FAQ 详细信息");
}
%>
+----+-----------+-----------------------+