一个强健 实用的ajax二级联动菜单(有演示和附源程序打包下载)
前些天在搞后台的时候要用到二级联动的菜单,到网上去找了半天也没找到满意的,不是这错就是那错,在选择的时候有时候不能返回.真是郁闷.
后来就看到有人用ajax写了无限级分类(牛,呵呵,本人看不懂.).就想到我那个后台不也可以用ajax试试,虽然比用javascript的慢点,但我这个实用.强健..不会出错,也不会选择某个大类后再返回无选择状态小类为空的状态.呵呵.
文件目录:如图
主要代码如下:
index.asp
复制代码 代码如下:
<%@LANGUAGE="VBSCRIPT"CODEPAGE="936"%>
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"c/>
<title>Ajax的二级联动by啊峰</title>
<scriptlanguage="javascript"src="js.js"></script>
</head>
<body>
<h2><ahref="http://yeahdown.com/">Ajax的二级联动by啊峰</a></h2>
<>
<%
Setafeng=Conn.Execute("selectbigclassid,bigclassnamefrombigclass")
%>
<formid="form1"name="form1"method="post"action="">
<divid="bigclass"style="float:left">
<selectname="select">
<optionvalue="0">选择一级分类</option>
<%IfNotafeng.Eofthen
DoWhileNotafeng.Eof
bigclassid=afeng("bigclassid")
bigclassname=afeng("bigclassname")%>
<optionvalue="<%=bigclassid%>"><%=bigclassname%></option>
<%afeng.Movenext
Loop
EndIf
afeng.Close
Setafeng=Nothing
Conn.Close
SetConn=Nothing%>
</select>
</div>
<divid="subclass"style="float:left"><selectname="select2">
<optionvalue="0">选择二级分类</option>
</select>
</div>
</form>
</body>
</html>
getsubcategory.asp文件:
复制代码 代码如下:
<%
Response.Charset="GB2312"'设置字符集原默认为utf-8
bigclassid=safe(request.QueryString("bigclassid"))'非法字符过滤
Ifbigclassid<>""Then
SetRe=NewRegExp
Re.IgnoreCase=true
Re.Global=false
Re.Pattern="^[0-9]{1,3}$"
IfNotRe.Test(bigclassid)Then
Response.Write"非法参数"
Response.End
EndIf%>
<>
<%OnerrorResumeNext
setp=conn.execute("select*fromsmallclasswherebigclassid="&bigclassid&"")
IfErrThen
Err.Clear
Response.Write"查询出错"
Response.End
EndIf
IfNotp.EofThen
html="<selectname='smallclassid'>"&vbnewline
DoWhileNotp.Eof
html=html&"<optionvalue='"&p("smallclassid")&"'>"&p("smallclassname")&"</option>"&vbnewline
p.Movenext
Loop
html=html&"</select>"
Else
html="<selectname='smallclassid'><optionvalue='0'selected>暂无小类</option></select>"
EndIf
p.Close
Setp=Nothing
Conn.Close
SetConn=Nothing
Response.writehtml
html=""
EndIf
%>
iconn.asp文件:
复制代码 代码如下:
<%
Setconn=server.CreateObject("adodb.connection")
db="$#yeahdown.com@$$$@@%%.asp"
C&Server.MapPath(db)
OnErrorResumeNext
conn.openConnStr
IfErrThen
Err.Clear
Response.Write"<divid=""error"">连接数据库出错</div>"
Response.End
EndIf
Functionsafe(Str)
IfIsnull(Str)Then
safe=""
ExitFunction
EndIf
Str=Replace(Str,Chr(0),"",1,-1,1)
Str=Replace(Str,"""",""",1,-1,1)
Str=Replace(Str,"<","<",1,-1,1)
Str=Replace(Str,">",">",1,-1,1)
Str=Replace(Str,"script","script",1,-1,0)
Str=Replace(Str,"SCRIPT","SCRIPT",1,-1,0)
Str=Replace(Str,"Script","Script",1,-1,0)
Str=Replace(Str,"script","Script",1,-1,1)
Str=Replace(Str,"object","object",1,-1,0)
Str=Replace(Str,"OBJECT","OBJECT",1,-1,0)
Str=Replace(Str,"Object","Object",1,-1,0)
Str=Replace(Str,"object","Object",1,-1,1)
Str=Replace(Str,"applet","applet",1,-1,0)
Str=Replace(Str,"APPLET","APPLET",1,-1,0)
Str=Replace(Str,"Applet","Applet",1,-1,0)
Str=Replace(Str,"applet","Applet",1,-1,1)
Str=Replace(Str,"[","[")
Str=Replace(Str,"]","]")
Str=Replace(Str,"""","",1,-1,1)
Str=Replace(Str,"=","=",1,-1,1)
Str=Replace(Str,"'","''",1,-1,1)
Str=Replace(Str,"select","select",1,-1,1)
Str=Replace(Str,"execute","execute",1,-1,1)
Str=Replace(Str,"exec","exec",1,-1,1)
Str=Replace(Str,"join","join",1,-1,1)
Str=Replace(Str,"union","union",1,-1,1)
Str=Replace(Str,"where","where",1,-1,1)
Str=Replace(Str,"insert","insert",1,-1,1)
Str=Replace(Str,"delete","delete",1,-1,1)
Str=Replace(Str,"update","update",1,-1,1)
Str=Replace(Str,"like","like",1,-1,1)
Str=Replace(Str,"drop","drop",1,-1,1)
Str=Replace(Str,"create","create",1,-1,1)
Str=Replace(Str,"rename","rename",1,-1,1)
Str=Replace(Str,"count","count",1,-1,1)
Str=Replace(Str,"chr","chr",1,-1,1)
Str=Replace(Str,"mid","mid",1,-1,1)
Str=Replace(Str,"truncate","truncate",1,-1,1)
Str=Replace(Str,"nchar","nchar",1,-1,1)
Str=Replace(Str,"char","char",1,-1,1)
Str=Replace(Str,"alter","alter",1,-1,1)
Str=Replace(Str,"cast","cast",1,-1,1)
Str=Replace(Str,"exists","exists",1,-1,1)
Str=Replace(Str,Chr(13),"<br>",1,-1,1)
safe=Replace(Str,"'","''",1,-1,1)
EndFunction
%>
最后一个js.js
复制代码 代码如下:
functioncreatexmlhttp()
{
xmlhttpobj=false;
try{//创建对象，一个一个的试，哎，要是能统一标准都好。。
xmlhttpobj=newXMLHttpRequest;
}catch(e){
try{
xmlhttpobj=newActiveXObject("MSXML2.XMLHTTP");
}catch(e2){
try{
xmlhttpobj=newActiveXObject("Microsoft.XMLHTTP");
}catch(e3){
xmlhttpobj=false;
}
}
}
returnxmlhttpobj;
}
functiongetsubcategory(bigclassid){
if(bigclassid==0){
document.getElementById("subclass").innerHTML="<selectname='smallclassid'><optionvalue='0'selected>选择二级分类</option></select>";
return;
};
varxmlhttpobj=createxmlhttp();
if(xmlhttpobj){//如果创建对象xmlhttpobj成功
xmlhttpobj.open('get',"getsubcategory.asp?bigclassid="+bigclassid+"&number="+Math.random(),true);//get方法加个随机数。
xmlhttpobj.send(null);
xmlhttpobj.onreadystatechange=function(){//客户端监控函数
if(xmlhttpobj.readystate==4){//服务器处理请求完成
if(xmlhttpobj.status==200){
//alert('ok');
varhtml=xmlhttpobj.responseText;//获得返回值
document.getElementById("subclass").innerHTML=html;
}else{
document.getElementById("subclass").innerHTML="对不起，您请求的页面有问题...";
}
}else{
document.getElementById("subclass").innerHTML="加载中，请梢候...";//服务器处理中
}
}
}
}
打包文件下载