基于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
%
>