ASP Ajax  级联菜单
网站中，三级联动也会经常用到，例如省市县的选择。通过纯JavaScript编程，需要在页面中添加省市县的数据，代码比较乱，并且添加比较麻烦。为了解决上述问题，将省市县的数据存入数据库，通过Ajax动态加载所需数据，是比较完美的解决方案。本实例通过省市县的三级联动，实现了动态加载所需数据效果。步骤如下所示：
（1）首先为本实例设计数据库，该数据库Access版本，可以从因特网或者本书配套光盘中获得。该数据库的文件名称为area.mdb，数据库中有一个省份表，表设计视图如表8-2所示。
表8-2  province表的字段
字段名
字段类型
字段说明
id
自动编号
主键，自增列
provinceID
文本(6)
省份ID
province
文本(40)
省份名称
该数据库中还有一个城市表，表设计视图如表8-3所示。
表8-3  city表的字段
字段名
字段类型
字段说明
id
自动编号
主键，自增列
cityID
文本(6)
城市ID
city
文本(40)
城市名称
father
文本(6)
省份ID
该数据库中另外还有一个区县表，表设计视图如表8-4所示。
表8-4  area表的字段
字段名
字段类型
字段说明
id
自动编号
主键，自增列
areaID
文本(6)
区县ID
area
文本(40)
区县名称
father
文本(6)
城市ID
ajax实例 文件浏览（2）新建一个名为index.html的HTML文件，该文件为用户提供选择省市县的下拉列表框，首先来看布局表单，内容如下所示：
<table border="0" cellspacing="0" cellpadding="5">
  <tr>
    <td>省：
      <select name="select" id="province" onchange="show('province',this.value,'city');">
      </select></td>
    <td>市：
      <select name="select" id="city" onChange="show('city',this.value,'area');">
      </select></td>
    <td>地区：
      <select name="select" id="area">
      </select></td>
  </tr>
</table>
（3）联动功能通过JavaScript代码实现，接下来编写JavaScript函数，首先来看向服务器端发送请求的show()函数。该函数有三个参数，selectobj为用户选择的下拉框ID，selectvalue为用户选择下拉框的值，obj为服务器端返回的数据要填充的下拉框ID。代码如下所示：
<script language=javascript>
var XmlHttp;
var showobj
function createXMLHttpRequest ()
{
    //在IE下创建XMLHttpRequest对象
    try
    {
        XmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
    }
    catch(e)
    {
        try
        {
            XmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        catch(oc)
        {
            XmlHttp = null;
        }
    }
    //在Mozilla和Safari等非IE浏览器下创建XMLHTTPRequest对象
    if(!XmlHttp && typeof XMLHttpRequest != "undefined")
    {
        XmlHttp = new XMLHttpRequest();
    }
    return XmlHttp;
}
function show(selectobj,selectvalue,obj){
    if(selectvalue!=""){
        var url ="ajax.asp?selectobj="+selectobj+"&selectvalue="+escape(selectvalue);
        createXMLHttpRequest();
        adystatechange = handleStateChange;
        XmlHttp.open("GET", url, true );
        XmlHttp.send(null );
        showobj=obj
    }
}
</script>
（4）然后编写handleStateChange()函数。该函数接收服务器端返回的数据，并将数据交给BuildSel()函数进行处理。代码如下所示：
function handleStateChange(){
    if( adyState == 4 ){
        if(XmlHttp.status == 200 ){
            var sponseText;
            BuildSel(ElementById(showobj));
        }
    }
}
（5）编写BuildSel()函数。该函数将字符串转换为数组，添加到指定的下拉列表框中。代码如下所示：
function BuildSel(str,sel)
{
    //先清空原来的数据.
    sel.options.length=0;
    //定义一个数组对象
    var arrstr = new Array();
    //以","号拆分传入的字串，并存入数组
    arrstr = str.split(",");
    if(str.length>0){
        //循环
        for(var i=0;i<arrstr.length;i++){
        var subarrstr=new Array();
        //以"|"拆分
        subarrstr=arrstr[i].split("|");
        sel.options.add(new Option(subarrstr[1],subarrstr[0]));
        }
        sel.options[0].selected=true;
    }
}
（6）编写该页面首次加载时的初始函数init()。该函数调用show()函数，并将showobj变量赋值为“province”，实现页面首次加载时，显示省份下拉列表框中数据的功能。代码如下所示：
function init(){
    show("province","0","province")
    showobj="province"
}
（7）在页面的<body>标记添加onload事件，实现当页面加载时，执行init()函数的功能。代码如下所示：
<body onload="init()">
（8）客户端编写完成，接下来编写服务器端程序。新建名为Ajax.asp的asp文件，该文件获得客户端请求，从数据库中读取响应信息，返回给客户端。conn.asp文件为连接数据库area.mdb的连接语句，这里省略此代码的罗列。Ajax.asp文件的代码如下所示：
<%
Response.CharSet="gb2312"
selectobj=request.QueryString("selectobj")
selectvalue=request.QueryString("selectvalue")
select case selectobj
    case "province":
        if selectvalue="0" then
            sql="select * from province"
        else
            sql="select * from city where father='"&selectvalue&"'"
        end if
    case "city":
        sql="select * from area where father='"&selectvalue&"'"
end select
set ute(sql)
returnstr=""
while f
    returnstr=returnstr&rs(1)&"|"&rs(2)&","
rs.movenext
wend
rs.close
if returnstr<>"" then
    returnstr=left(returnstr,len(returnstr)-1)
end if
response.Write(returnstr)
%>
（9）保存全部文件，在浏览器中运行index.html页面，输入用户名及密码信息，效果如图8-9所示。
图8-9  三级联动效果

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。