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