描述: 初始页面
图片:
描述: 一级菜单
图片:
描述: 二级菜单
图片:
使用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,如果想试试上面的代码,这里需要更改成你自己的类。
附件是实现运行的截图。
图片:
![](http://blog.ccidnet.com/attachment/Mon_0604/10_2307_a96f027ecef35e1.jpg)
图片:
![](http://blog.ccidnet.com/attachment/Mon_0604/10_2307_86f98427521b440.jpg)
图片:
![](http://blog.ccidnet.com/attachment/Mon_0604/10_2307_54e8d57c2ef7f69.jpg)
使用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,如果想试试上面的代码,这里需要更改成你自己的类。
附件是实现运行的截图。