数据库设计:
数据库名称:data.mdb
表名:category
字段:
id 自动编号 编号
name 文本 分类名称，不超过50字符
level 数字 节点层次
parentId 数字 父节点id，顶层节点为0
数据示例:
id ------- name ---------- level ---- parentId
1 -------- 数据库开发------- 0 ------- 0 //一级菜单
2 -------- MS-SQL Server --- 1 -------- 1 //二级菜单
3 -------- 数据仓库 -------- 1 -------- 1 //二级菜单
===========================================================
index.asp
===========================================================
<%
Dim conn,rs
Dim connstr
Dim sqlCmd
'创建数据库连接对象并打开
set conn=server.createobject("adodb.connection")
connstr="Provider=Microsoft.jet.oledb.4.0;data source=" & server.mappath("data.mdb")
conn.open connstr
'用于从数据库中获取数据的sql语句
sqlCmd="select id,name from category where level=0"
'创建数据集对象
set rs=conn.execute(sqlCmd)
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>二级菜单示例</title>
</head>
<body>
<form name="form1">
<select name="select1" onchange="getLevel2()">
<option value="0">请选择一级分类：</option>
<%
'遍历记录集生成下拉菜单选项
while not rs.eof
Response.write("<option value='" & rs("id") & "'>")
Response.write(rs("name"))
Response.write("</option>")
rs.movenext
wend
'关闭数据库连接及记录集，释放资源
rs.close
conn.close
set rs=nothing
set conn=nothing
%>
</select>
<select name="select2">
<option value="0">请选择二级分类：</option>
</select>
</form>
</body>
</html>
<script language="JavaScript" type="text/javascript">
<!--
//cache用于存储已经获取的数据
var cache=[];
function getLevel2(){
if(document.forms.form1.select1.selectedIndex==0){
//当一级菜单未选中时，二级菜单仅保留提示项
document.forms.form1.select2.length=1;
return;
}
//如果当前二级分类没有被缓存，则从服务器端获取
if(!cache[document.forms.form1.select1.selectedIndex]){
//建立跨浏览器的XMLHttpRequest对象
var xmlhttp;
try{
xmlhttp= new ActiveXObject('Msxml2.XMLHTTP');
}catch(e){
try{
xmlhttp= new ActiveXObject('Microsoft.XMLHTTP');
}catch(e){
try{
xmlhttp= new XMLHttpRequest();
}catch(e){}
}
}
//创建请求，并使用escape对userName编码，以避免乱码
xmlhttp.open("get","ajax.asp?id="+document.forms.form1.select1.value);
xmlhttp.onreadystatechange=function(){
if(xmlhttp.readyState==4){
if(xmlhttp.status==200){
cache[document.forms.form1.select1.selectedIndex]=eval("("+unescape(xmlhttp.responseText)+")");
//获取成功后重新调用getLevel2，将数据填充到下拉框，如果直接在这里写会造成代码重复
getLevel2();
}else{
alert("网络失败。");
}
}
}
xmlhttp.send(null);
//必须在这里返回，等待回调
return;
}
//此时已经确保缓存不为空
document.forms.form1.select2.length=1;
var _arr=cache[document.forms.form1.select1.selectedIndex];
for(var i=0;i<_arr.length-1;i+=2){
with(document.forms.form1.select2){
options[options.length]=new Option(_arr[i],_arr[i+1]);
}
}
}
//-->
</script>
=================================================
ajax.asp 二级菜单处理页
=================================================
<%
Dim conn,rs
Dim connstr
Dim sqlCmd
'创建数据库连接对象并打开
set conn=server.createobject("adodb.connection")
connstr="Provider=Microsoft.jet.oledb.4.0;data source=" & server.mappath("data.mdb")
conn.open connstr
'获取相应的二级目录数据
sqlCmd="select id,name from category where level=1 and parentId=" & Request.querystring("id")
set rs=conn.execute(sqlCmd)
'返回JavaScript格式的数组
Response.write("[")
while not rs.eof
'使用escape避免乱码问题
Response.write("'" & escape(rs("name")) & "', ")
Response.write(rs("id"))
Response.write(",")
rs.movenext
wend
'为了避免最后一个逗号的问题，最后一个数组元素不使用
Response.write("0]")
%>
数据库名称:data.mdb
表名:category
字段:
id 自动编号 编号
name 文本 分类名称，不超过50字符
level 数字 节点层次
parentId 数字 父节点id，顶层节点为0
数据示例:
id ------- name ---------- level ---- parentId
1 -------- 数据库开发------- 0 ------- 0 //一级菜单
2 -------- MS-SQL Server --- 1 -------- 1 //二级菜单
3 -------- 数据仓库 -------- 1 -------- 1 //二级菜单
===========================================================
index.asp
===========================================================
<%
Dim conn,rs
Dim connstr
Dim sqlCmd
'创建数据库连接对象并打开
set conn=server.createobject("adodb.connection")
connstr="Provider=Microsoft.jet.oledb.4.0;data source=" & server.mappath("data.mdb")
conn.open connstr
'用于从数据库中获取数据的sql语句
sqlCmd="select id,name from category where level=0"
'创建数据集对象
set rs=conn.execute(sqlCmd)
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>二级菜单示例</title>
</head>
<body>
<form name="form1">
<select name="select1" onchange="getLevel2()">
<option value="0">请选择一级分类：</option>
<%
'遍历记录集生成下拉菜单选项
while not rs.eof
Response.write("<option value='" & rs("id") & "'>")
Response.write(rs("name"))
Response.write("</option>")
rs.movenext
wend
'关闭数据库连接及记录集，释放资源
rs.close
conn.close
set rs=nothing
set conn=nothing
%>
</select>
<select name="select2">
<option value="0">请选择二级分类：</option>
</select>
</form>
</body>
</html>
<script language="JavaScript" type="text/javascript">
<!--
//cache用于存储已经获取的数据
var cache=[];
function getLevel2(){
if(document.forms.form1.select1.selectedIndex==0){
//当一级菜单未选中时，二级菜单仅保留提示项
document.forms.form1.select2.length=1;
return;
}
//如果当前二级分类没有被缓存，则从服务器端获取
if(!cache[document.forms.form1.select1.selectedIndex]){
//建立跨浏览器的XMLHttpRequest对象
var xmlhttp;
try{
xmlhttp= new ActiveXObject('Msxml2.XMLHTTP');
}catch(e){
try{
xmlhttp= new ActiveXObject('Microsoft.XMLHTTP');
}catch(e){
try{
xmlhttp= new XMLHttpRequest();
}catch(e){}
}
}
//创建请求，并使用escape对userName编码，以避免乱码
xmlhttp.open("get","ajax.asp?id="+document.forms.form1.select1.value);
xmlhttp.onreadystatechange=function(){
if(xmlhttp.readyState==4){
if(xmlhttp.status==200){
cache[document.forms.form1.select1.selectedIndex]=eval("("+unescape(xmlhttp.responseText)+")");
//获取成功后重新调用getLevel2，将数据填充到下拉框，如果直接在这里写会造成代码重复
getLevel2();
}else{
alert("网络失败。");
}
}
}
xmlhttp.send(null);
//必须在这里返回，等待回调
return;
}
//此时已经确保缓存不为空
document.forms.form1.select2.length=1;
var _arr=cache[document.forms.form1.select1.selectedIndex];
for(var i=0;i<_arr.length-1;i+=2){
with(document.forms.form1.select2){
options[options.length]=new Option(_arr[i],_arr[i+1]);
}
}
}
//-->
</script>
=================================================
ajax.asp 二级菜单处理页
=================================================
<%
Dim conn,rs
Dim connstr
Dim sqlCmd
'创建数据库连接对象并打开
set conn=server.createobject("adodb.connection")
connstr="Provider=Microsoft.jet.oledb.4.0;data source=" & server.mappath("data.mdb")
conn.open connstr
'获取相应的二级目录数据
sqlCmd="select id,name from category where level=1 and parentId=" & Request.querystring("id")
set rs=conn.execute(sqlCmd)
'返回JavaScript格式的数组
Response.write("[")
while not rs.eof
'使用escape避免乱码问题
Response.write("'" & escape(rs("name")) & "', ")
Response.write(rs("id"))
Response.write(",")
rs.movenext
wend
'为了避免最后一个逗号的问题，最后一个数组元素不使用
Response.write("0]")
%>
文章来源：桂林唯创网络
475003427