ajax asp的二级联动菜单实例
ajax asp教程的二级联动菜单实例
category.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
'关闭数据库连接及记录集，释放资源www.zhutiai.com
rs.close
conn.close
set rs=nothing
set conn=nothing
%>
</select>
<select name="select2">
<option value="0">请选择二级分类：</option>
</select>
</form>
</body>
</html>
<script language="网页特效" 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，www.111cn.net将数据填充到下拉框，如果直接在这里写会造成代码重复
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]")
%>
- 上一篇：一款asp分页程序（支持跳转与输入数字）
- 下一篇：asp获取文件大小