基于asp+ajax和数据库驱动的二级联动菜单

212 阅读 0 评论 140 点赞

我是靠谱客的博主明亮彩虹，最近开发中收集的这篇文章主要介绍基于asp+ajax和数据库驱动的二级联动菜单，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

index.asp 页面代码

复制代码代码如下:

 
<!--#include file="conn.asp" --> 
<% 
set cmd = conn.execute("select bigclassid,bigclassname from bigclass") 
tempid=cmd("bigclassid") 
%> 
<select name="menu" onChange="getsubcategory(this.value);"> 

<% 
if not cmd.eof then 
do while not cmd.eof 
bigclassid= cmd("bigclassid") 
bigclassname = cmd("bigclassname") 
%> 
<option value="<%=bigclassid%>"><%=bigclassname%></option> 
<% 
cmd.movenext 
loop 
end if 
cmd.close 
set cmd = nothing 
%> 
</select> 
<div id="subclass"> 
<select name="submenu"> 

<% 
set cxd = conn.execute("select * from smallclass where bigclassid=" & tempid) 
if not cxd.eof then 
do while not cxd.eof 
smallclassid= cxd("smallclassid") 
smallclassname = cxd("smallclassname")%> 
<option value="<%=smallclassid%>"><%=smallclassname%></option> 
<% 
cxd.movenext 
loop 
cxd.close 
set cxd = nothing 
else 
html = "<select name='smallclassid'><option value='0' selected>暂无小类</option></select>" 
response.write html 
end if 
%> 
</select> 
</div> 

ajax.js 代码

复制代码代码如下:

 
// JavaScript Document 
function createxmlhttp() 
{ 
xmlhttpobj = false; 
try{ 
xmlhttpobj = new XMLHttpRequest; 
}catch(e){ 
try{ 
xmlhttpobj=new ActiveXObject("MSXML2.XMLHTTP"); 
}catch(e2){ 
try{ 
xmlhttpobj=new ActiveXObject("Microsoft.XMLHTTP"); 
}catch(e3){ 
xmlhttpobj = false; 
} 
} 
} 
return xmlhttpobj; 
} 

function getsubcategory(bigclassid){ 
if(bigclassid==0){ 
document.getElementById("subclass").innerHTML="<select name='smallclassid'><option value='0' selected>选择二级分类</option></select>"; 
return; 
}; 
var xmlhttpobj = createxmlhttp(); 
if(xmlhttpobj){//如果创建对象xmlhttpobj成功 
xmlhttpobj.onreadystatechange=handle; 
xmlhttpobj.open('get',"getsubcategory.asp?bigclassid="+bigclassid+"&number="+Math.random(),true);//get方法 加个随机数。 


xmlhttpobj.send(null); 
} 
} 

function handle(){//客户端监控函数 
//if(xmlhttpobj.readystate==4){//服务器处理请求完成 
if(xmlhttpobj.status==200){ 
//alert('ok'); 
var html = xmlhttpobj.responseText;//获得返回值 
document.getElementById("subclass").innerHTML=html; 
}else{ 
document.getElementById("subclass").innerHTML="对不起，您请求的页面有问题..."; 
} 
//} 
//else{ 
//document.getElementById("subclass").innerHTML=xmlhttpobj.readystate;//服务器处理中 
//} 
//} 

} 

getsubcategory.asp 代码

复制代码代码如下:

 
<%@language="vbscript" codepage="936"%> 
<!--#include file="conn.asp"--> 
<% 
response.charset="gb2312" 
bigclassid=safe(request.querystring("bigclassid")) 
if bigclassid<>"" then 
set re=new regexp 
re.ignorecase=true 
re.global=false 
re.pattern = "^[0-9]{1,3}$" 
if not re.test(bigclassid) then 
response.write "非法参数" 
response.end 
end if%> 

<%on error resume next 
set p = conn.execute("select * from smallclass where bigclassid=" & bigclassid) 
if err then 
err.clear 
response.write "查询出错" 
response.end 
end if 
if not p.eof then 
html = "<select name='select2'>"&vbnewline 
do while not p.eof 
html = html&"<option value='"&p("smallclassid")&"'>"&p("smallclassname")&"</option>"&vbnewline 
p.movenext 
loop 
html = html&"</select>" 
else 
html = "<select name='smallclassid'><option value='0' selected>暂无小类</option></select>" 
end if 
p.close 
set p = nothing 
conn.close 
set conn = nothing 
response.write html 
html = "" 
end if 
%> 