描述： 初始頁面
圖片：
描述： 一級菜單
圖片：
描述： 二級菜單
圖片：
使用ajax實現動態菜單。菜單內容從資料庫中讀取。相關表的定義如下：
CREATE TABLE [dbo].[tsys_menu] (
[mn_id] [varchar] (16) COLLATE Chinese_PRC_CI_AS NOT NULL ,
[parent_mn_id] [varchar] (16) COLLATE Chinese_PRC_CI_AS NOT NULL ,
[mn_name] [varchar] (50) COLLATE Chinese_PRC_CI_AS NOT NULL ,
[mn_order] [int] NOT NULL ,
[mn_type] [char] (1) COLLATE Chinese_PRC_CI_AS NOT NULL ,
[target_url] [varchar] (200) COLLATE Chinese_PRC_CI_AS NOT NULL ,
[exp_url] [varchar] (200) COLLATE Chinese_PRC_CI_AS NULL ,
[help_url] [varchar] (200) COLLATE Chinese_PRC_CI_AS NULL ,
[memo] [varchar] (200) COLLATE Chinese_PRC_CI_AS NULL ,
[context_type] [char] (1) COLLATE Chinese_PRC_CI_AS NULL ,
[manual_type] [char] (1) COLLATE Chinese_PRC_CI_AS NULL ,
[expert_type] [char] (1) COLLATE Chinese_PRC_CI_AS NULL ,
[case_type] [char] (1) COLLATE Chinese_PRC_CI_AS NULL
) ON [PRIMARY]
GO
此次執行個體使用了dev2dev.bea.com.cn中的ajax模板。原文在址如下：
http://dev2dev.bea.com.cn/bbsdoc/20051114125.html
作者：柯自聰
本人建議，所有人都認真看看那篇文章，的確寫的很好。
以下是頁面內容ybg-menu.htm
<html>
<head>
<title>menu</title>
<script language="javascript">
var http_request = false;
var currentPos = false;
function send_request(url) {//初始化、指定處理函數、發送請求的函數
http_request = false;
//開始初始化XMLHttpRequest對象
if(window.XMLHttpRequest) { //Mozilla 瀏覽器
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) {//設定MiME類別
http_request.overrideMimeType("text/xml");
}
}
else if (window.ActiveXObject) { // IE瀏覽器
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
http_request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
if (!http_request) { // 異常，建立對象執行個體失敗
window.alert("不能建立XMLHttpRequest對象執行個體.");
return false;
}
http_request.onreadystatechange = processRequest;
// 確定發送請求的方式和URL以及是否同步執行下段代碼
http_request.open("GET", url, true);
http_request.send(null);
}
// 處理返回資訊的函數
function processRequest() {
if (http_request.readyState == 4) { // 判斷對象狀態
if (http_request.status == 200) { // 資訊已經成功返回，開始處理資訊
document.getElementById(currentPos).innerHTML = http_request.responseText;
} else { //頁面不正常
alert("您所請求的頁面有異常。");
}
}
}
function showMenu(obj) {
document.getElementById(obj).parentNode.style.display = "";
document.getElementById(obj).innerHTML = "正在讀取資料..."
currentPos = obj;
send_request("playMenu.jsp?parent_id="+obj);
}
</script>
</head>
<body>
<table>
<tr>
<td>
<a href="javascript:showMenu('ROOT')">ROOT</a>
<td>
</tr>
<tr>
<td id='ROOT'></td>
</tr>
</table>
</body>
</html>
以下是jsp內容playMenu.jsp
<%@ page contentType="text/html;charset=GBK"%>
<%@page import="com.jfcgf.frame.util.DbUtil"%>
<%@ page import="java.sql.*"%>
<%
DbUtil db = new DbUtil();
String parent_id = request.getParameter("parent_id");
String sql = "select mn_id,mn_name from tsys_menu where parent_mn_id = '"+parent_id+"'";
//執行上面的sql
try{
ResultSet rs = db.executeQuery(sql);
while(rs.next()){
String item = "<table><tr valign=/"top/"><td>----></td><td><a href=/"javascript:showMenu(/'"+rs.getString("mn_id")+"')/">"+
rs.getString("mn_name")+"</a></td><td id='"+rs.getString("mn_id")+"'></td></tr><br /></table>";
out.println(item);
}
}catch(Exception e){
out.println(e.toString());
}finally{
if(db != null){
db.closeConnection(); db = null;
}
}
%>
注意：DbUtil類是一個串連資料庫的javabean，如果想試試上面的代碼，這裡需要更改成你自己的類。
附件是實現啟動並執行截圖。
