AJAX实战实现级联选择
作者:啊峰 时间:2009-08-21 12:27:00
1.客户端的主页面:
<%@LANGUAGE="VBSCRIPT" CODEPAGE="936"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Ajax的二级联动</title>
<script language="javascript" src="Jsinc/js.js"></script>
</head>
<body>
<h2><a href="https://www.aspxhome.com/">Ajax的二级联动by啊峰</a></h2>
<!--#include file="conn.asp"-->
<%
Set afeng = Conn.Execute("select bigclassid,bigclassname from bigclass")
%>
<form id="form1" name="form1" method="post" action="">
<div id="bigclass" style="float:left">
<select name="select" onchange="getsubcategory(this.value);"> <!--可以调用JS方法-->
<option value="0">选择一级分类</option>
<%
If Not afeng.Eof then
Do While Not afeng.Eof
bigclassname = afeng("bigclassname") '先将大类内容提取出来,通过大类名字去提取小类内容
%>
<option value="<%=bigclassname%>"><%=bigclassname%></option>
<% afeng.Movenext
Loop
End If
afeng.Close
Set afeng = Nothing
Conn.Close
Set Conn = Nothing
%>
</select>
</div>
<div id="subclass" style="float:left">
<select name="select2">
<option value="0">选择二级分类</option>
</select>
</div>
</form>
</body>
</html>
2.实现的JS代码:
var XMLHttpReq;
function createXMLHttpRequest() {
if(window.XMLHttpRequest) { //Mozilla 浏览器
XMLHttpReq = new XMLHttpRequest();
}
else if (window.ActiveXObject) { // IE浏览器
try {
XMLHttpReq = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e){
try {
XMLHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
}
//一级菜单改变就会触发此事件进行处理
function getsubcategory(BigClassName){
alert(BigClassName);
if(BigClassName==0){ //表示如果没有选择一级菜单就会提示二级菜单样式
document.getElementById("subclass").innerHTML="<select name='smallclassid'><option value='0' selected>选择二级分类</option></select>";
return;
};
createXMLHttpRequest();
XMLHttpReq.onreadystatechange = AddStateChange;//监听状态是否变化
XMLHttpReq.open('get',"getsubcategory.asp?BigClassName="+escape(BigClassName),true);//get方法 加个随机数。
XMLHttpReq.send(null);
}
function AddStateChange(){
//alert("正在监听请求变化");
if (XMLHttpReq.readyState == 4) { // 判断对象状态
alert(XMLHttpReq.status);
if (XMLHttpReq.status == 200) { // 信息已经成功返回,开始处理信息
var html = unescape(XMLHttpReq.responseText);//获得返回值
document.getElementById("subclass").innerHTML=html;//二级菜单中的内容
}else { //页面不正常
document.getElementById("subclass").innerHTML="对不起,您请求的页面有问题...";
}
}else{
document.getElementById("subclass").innerHTML="加载中,请梢候...";//服务器处理中
}
}
3.处理客户端请求的响应代码:
<!--#include file="conn.asp"-->
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="Cache-Control" content="no-store"/>
</head>
<body>
<%
'编码处理
Function VbsEscape(str)
dim i,s,c,a
s=""
For i=1 to Len(str)
c=Mid(str,i,1)
a=ASCW(c)
If (a>=48 and a<=57) or (a>=65 and a<=90) or (a>=97 and a<=122) Then
s = s & c
ElseIf InStr("@*_+-./",c)>0 Then
s = s & c
ElseIf a>0 and a<16 Then
s = s & "%0" & Hex(a)
ElseIf a>=16 and a<256 Then
s = s & "%" & Hex(a)
Else
s = s & "%u" & Hex(a)
End If
Next
VbsEscape=s
End Function
'与javascript中的unescape()等效
Function VbsUnEscape(str)
Dim x
x=InStr(str,"%")
Do While x>0
VbsUnEscape=VbsUnEscape&Mid(str,1,x-1)
If LCase(Mid(str,x+1,1))="u" Then
VbsUnEscape=VbsUnEscape&ChrW(CLng("&H"&Mid(str,x+2,4)))
str=Mid(str,x+6)
Else
VbsUnEscape=VbsUnEscape&Chr(CLng("&H"&Mid(str,x+1,2)))
str=Mid(str,x+3)
End If
x=InStr(str,"%")
Loop
VbsUnEscape=VbsUnEscape&str
End Function
%>
<%
Response.Charset="gb2312"
bName=VbsUnEscape(request.QueryString("BigClassName"))
'bName=request("BigClassName")
%>
<%
sql = "select * from SmallClass where BigClassName='"&bName&"'"
set p = conn.execute(sql) '可以从小类中根据大类名去提取记录
'html = html&" "&sql
If Not p.Eof Then
html = "<select name='smallclassid'>"&vbnewline
html = html&"<option value='"&"0"&"'>"&"没有子类"&"</option>"&vbnewline
Do While Not p.Eof
html = html&"<option value='"&p("SmallClassID")&"'>"&VbsEscape(p("SmallClassName"))&"</option>"&vbnewline
p.Movenext
Loop
html = html&"</select>"
Else
html = "<select name='smallclassid'><option value='0' selected>"&VbsEscape(bName)&"</option></select>"
End If
p.Close
Set p = Nothing
Conn.Close
Set Conn = Nothing
Response.write html '这样的话直接从服务器端将内容写回来了哈哈非常地方便
html = ""
%>
</body>
</html>
OK,我一开始总是遇到了乱码问题,搞了一个中午。后来发现了如何来解决这篇文章是通过测试了的。
以后如果想做级联选择的话可以直接复制代码哈哈!