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


猜你喜欢
- 一、引言这个五一假期自驾回老家乡下,家里没装宽带,用手机热点方式访问网络。这次回去感觉4G信号没有以前好,通过百度查找小说最新更新并打开小说
- 废话不多说, 先看代码创建一个钉钉机器人, 必须使用加签方式1. 安装 ding 模块包go get -u github.com
- vue2.0在使用的过程中, .vue文件之间的跳转,在template中的常见写法是:<router-link to="/
- 视图视图是一个虚拟表(非真实存在),其本质是根据SQL语句获取动态的数据集,并为其命名,用户使用时只需使用名称即可获取结果集,并可以将其当作
- 网络爬虫抓取特定网站网页的html数据,但是一个网站有上千上万条数据,我们不可能知道网站网页的url地址,所以,要有个技巧去抓取网站的所有h
- 方法一:(by yangedie )这几天刚刚做了这个东西,有网友问到,所以分享一下。ie6、firefox2 通过,麻烦有ie7的网友测试
- 列表是最常用的Python数据类型,它可以作为一个方括号内的逗号分隔值出现。列表的数据项可以是不同的类型,可以是字符串,可以是数字类型,甚至
- 安装python分三个步骤:*下载python*安装python*检查是否安装成功1、下载Python(1)python下载地址https:
- 触发器是一种特殊的存储过程,触发器主要是通过事件进行触发而被自动调用执行,而存储过程必须通过存储过程的名称被调用。一、触发器的定义触发器是在
- 1、首先,根据自己的机子到MySQL官网下载对应的数据库https://dev.mysql.com/downloads/mysql/2、利用
- 本文实例讲述了Python全局变量用法。分享给大家供大家参考,具体如下:全局变量不符合参数传递的精神,所以,平时我很少使用,除非定义常量。今
- 本文实例讲述了Python反转序列的方法。分享给大家供大家参考,具体如下:序列是python中最基本的数据结构,序列中每个元素都有一个跟位置
- Python适配器模式,代码,思考等# -*- coding: utf-8 -*-# author:baoshanclass Compute
- 生成一列sum_age 对age 进行累加df['sum_age'] = df['age'].cumsum(
- 默认级别:warningimport logginglogging.debug('debug message')loggin
- 1. 下载资源官网下载地址: 点此进入直接点击下载,会自动开始下载。2. 开始安装将下载的安装包解压到本地,右键-以管理员身份运行setup
- <!--#include file="Include/Conn.asp"--><%If(Request
- Python docx库代码演示安装需要lxml pip install python-docx主业务代码from openpyxl imp
- 发现问题近期通过 mysql 命令连接 mysql server 的时候, 出现了不能输入中文的现象, 如下所示:mysql> SEL
- 一、性能度量性能度量目的是对学习期的泛华能力进行评估,性能度量反映了任务需求,在对比不同算法的泛华能力时,使用不同的性能度量往往会导致不同的