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,我一开始总是遇到了乱码问题,搞了一个中午。后来发现了如何来解决这篇文章是通过测试了的。
以后如果想做级联选择的话可以直接复制代码哈哈!


猜你喜欢
- insert into(列名) select 列名 from 表名 where 条件 --不创建表,只复制表数据 select 列名 int
- 最近在工作中涉及到判断服务器所在ip反馈程序使用情况的程序主要要求就是,本机或局域网调试程序时,不反馈其域名(localhost)或ip站长
- 1,WITH TEMPLET意思是,生成的页面架构将采用某个已设定的模板,在此之前我的一篇教程中介绍过,希望各位在看本教程之前对ASP采用模
- 在SQL Server 2005中,它的另外一个强大的新特点是数据库快照。数据库快照是一个数据库的只读副本,它是数据库所有数据的映射,由快照
- 1.彻底弄懂CSS盒子模式一(DIV布局快速入门) 2.彻底弄懂CSS盒子模式二(导航栏实例) 3.彻底弄懂CSS盒子模式三(浮动的表演和清
- 一个朋友给她的朋友买礼物。撕心裂肺、绞尽脑汁。最后蹦出来一个主意:“送打火机”我不知道小妞们通过哪的投票,就这么断定男人都喜欢打火机。导致一
- 我想把存在数据库里的每天24小时来访者数另放到一个Excel文件中去,可以吗?可以,其实就是将数据库里面的内容生成一个Excel文件:toe
- 在网页中放iframe,如果frameborder=0;就没有边框显示了;但动态创建时,在IE7中就不行了,从网上找到解决的办法,写出来记录
- 我们知道,任何数据库系统都无法避免崩溃的状况,即使你使用了Clustered,双机热备……仍然无
- 摘 要: 恢复丢失的数据库文件在很大程度上取决于所采用的备份策略。本文从恢复的灵活性出发,对Oracle8数据库的备份及恢复策略进行了探讨,
- 使用access数据库时可能用到的数据转换:类型转换涵数:函数 返回类型 expression 参数范围CBool Boolean 任何有效
- 在Flash中使用ASP需要的条件:1。你的ISP的server必须支持Active Server Pages并且最好支持数据库2。你应该要
- 在Windows系统中用“Ctrl+C”和“Ctrl+V”就可以完成复制、粘贴工作,是不是很爽?其实使用a标签的accesskey属性也可以
- 是否应该开启缓冲器? 通过脚本程序启动缓冲器 在ASP脚本的顶部包含Response.Buffer=True ,IIS就会将页面的内容缓存。
- 新闻系统,相册系统可以用用哦,简单实用,有兴趣的可以自己扩充!^_^相册截图:<?xml version="1.0"
- 在 PHP 中实现异步定时多任务消息推送的方式有多种,其中一种常用的方式是使用异步任务队列。以下是一个简单的步骤:安装和配置消息队列服务(如
- MySQL安装文件已被广泛应用但是也在不断的更新,这里介绍MySQL安装文件设置使用,帮助大家安装更新MySQL安装文件系统。Fedora5
- 初学者可以看看。在的img标签有两个属性分别为alt和title,对于很多初学者而言对这两个属性的正确使用都还抱有迷惑,当然这其中一部分原因
- 首先呢,需要有两个mysql服务器。如果做测试的话可以在同一台机器上装两个mysql服务程序,注意要两个运行程序的端口不能一样。我用的是一个
- 注:本文是应Alan邀请为《CSS布局实录》写的一个web标准入门指导。书已经上市近一年了,现在摘选出来,给初学者一个参考。希望了解更多实现