位置：首页>> 网络编程>> JavaScript>> AJAX实战实现级联选择

AJAX实战实现级联选择

作者：啊峰　　发布时间：2009-08-21 12:27:00　

标签：级联,ajax,菜单

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>

<％
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);">   
    <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.处理客户端请求的响应代码：

<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，我一开始总是遇到了乱码问题，搞了一个中午。后来发现了如何来解决这篇文章是通过测试了的。

以后如果想做级联选择的话可以直接复制代码哈哈！

投稿

AJAX实战实现级联选择

猜你喜欢