一个使用Ajax技术的二级菜单示例

发布时间:2007年02月26日      浏览次数:1855 次
数据库设计:
数据库名称: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]")
%>
文章来源:桂林唯创网络
免责声明:本站相关技术文章信息部分来自网络,目的主要是传播更多信息,如果您认为本站的某些信息侵犯了您的版权,请与我们联系,我们会即时妥善的处理,谢谢合作!