Ajax + Asp实现级联菜单

最新推荐文章于 2018-04-26 09:01:41 发布

liyanwwww

最新推荐文章于 2018-04-26 09:01:41 发布

阅读量628

点赞数

分类专栏： ASP 文章标签： ajax asp xmlhttprequest function javascript callback

ASP 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

在一些时候常常用到一个一级列表框（姑且这么叫）和一个二级列表框（姑且这么叫），二级列表框的选项随一级列表改变而改变，为了完成这个任务，其中一种就是用ajax+asp实现实现，代码如下：

一个Ajax 请求文件ajax_func.js放在ajax文件夹里：

一个连接数据库文件functiion.asp放在inc文件夹里：

<%
'用connection打开数据库
Sub kaiconn()
Dim dd
dd="Provider=microsoft.jet.oledb.4.0;data source="&Server.MapPath("data/supernews.mdb")
set conn=Server.CreateObject("ADODB.Connection")
conn.connectionstring=dd
conn.open
End Sub

'清空数据
Function QingKong(rs)
Set rs=Nothing
End Function

'关闭connection连接的数据库
Sub guanconn()
conn.close
End Sub

'弹出对话框,及页面转向。
Function outmsg(massage,adress)
response.write"<SCRIPT LANGUAGE=javaScript>"&Chr(13)
response.write""&Chr(13)
response.write"</SCRIPT>"&Chr(13)
End Function

数据库supernews.mdb放在文件夹data里，表设计为：

生成ＸＭＬ文件为prov.asp,代码如下：

<?xml version="1.0" encoding="gb2312" ?>

<%
Response.ContentType ="text/xml"
Response.Charset = "GB2312"
Response.Buffer = True
Response.ExpiresAbsolute = Now() - 1
Response.Expires = 0
Response.CacheControl = "no-cache"
Response.AddHeader "Pragma", "No-Cache"

Dim prov
prov=request("id")
If prov="" Then
outmsg "非法登入！","city.htm"
End If
Dim conn,sql,rs,num
sql="select count(*) as num from tb_city where city_prov='"&prov&"'"
kaiconn
Set rs=conn.execute(sql)
num=rs("num")
%>
<citys>
<num><%=num%></num>
<%
sql="select city_city from tb_city where city_prov='"&prov&"'"
Set rs=conn.execute(sql)
If Not rs.eof Then
Do While Not rs.eof
%>
<city><%=rs("city_city")%></city>
<%
rs.movenext
Loop
End If
guanconn
QingKong(rs)
%>
</citys>

列表框页面代码为：

function clear(o){
l=o.length;
for (i = 0; i< l; i++){
o.options[1]=null;
}
}
function change()
{
var prov=document.getElementById("prov").value;

if (prov=="")
{
return false;
}

send_request("get","prov.asp?id="+prov,null,"xml",chuli);

}
function chuli()
{
     if(http_request.readyState == 4)
      {
           if(http_request.status==200)
        {

       var oj=document.getElementById("city");
            clear(oj);
       var doc = http_request.responseXML;

var num=doc.getElementsByTagName("num")[0].firstChild.data;

      for (i=0;i<num;i++)
{
          var city=doc.getElementsByTagName("city")[i].firstChild.data;

      oj.add(new Option(city,city));
       }

         }
      else
      {
      alert("你请求的页面异常！");
      }
}
}
     //-->
     </SCRIPT>

       <select name="prov" οnchange="change();" id="prov">
                                               <option value="">省份</option>
                                               <option value="北京市">北京市</option>
                                               <option value="天津市">天津市</option>
                                               <option value="河北省">河北省</option>
                                               <option value="山西省">山西省</option>
                                               <option value="内蒙古">内蒙古</option>
                                               <option value="辽宁省">辽宁省</option>
                                               <option value="吉林省">吉林省</option>
                                               <option value="黑龙江省">黑龙江省</option>
                                               <option value="上海市">上海市</option>
                                               <option value="江苏省">江苏省</option>
                                               <option value="浙江省">浙江省</option>
                                               <option value="安徽省">安徽省</option>
                                               <option value="福建省">福建省</option>
                                               <option value="台湾">台湾</option>
                                               <option value="江西省">江西省</option>
                                               <option value="山东省">山东省</option>
                                               <option value="河南省">河南省</option>
                                               <option value="湖北省">湖北省</option>
                                               <option value="湖南省">湖南省</option>
                                               <option value="广东省">广东省</option>
                                               <option value="香港特别行政区">香港特别行政区</option>
                                               <option value="澳门特别行政区">澳门特别行政区</option>
                                               <option value="广西壮族自治区">广西壮族自治区</option>
                                               <option value="海南省">海南省</option>
                                               <option value="重庆市">重庆市</option>
                                               <option value="四川省">四川省</option>
                                               <option value="贵州省">贵州省</option>
                                               <option value="云南省">云南省</option>
                                               <option value="西藏自治区">西藏自治区</option>
                                               <option value="陕西省">陕西省</option>
                                               <option value="甘肃省">甘肃省</option>
                                               <option value="青海省">青海省</option>
                                               <option value="宁夏回族自治区">宁夏回族自治区</option>
                                               <option value="新疆维吾尔族自治区">新疆维吾尔族自治区</option>

</select>

</FORM>

在ＩＩＳ下运行（ 必须在ＩＩＳ下运行）效果如下：

liyanwwww

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax + Asp实现级联菜单

在一些时候常常用到一个一级列表框（姑且这么叫）和一个二级列表框（姑且这么叫），二级列表框的选项随一级列表改变而改变，为了完成这个任务，其中一种就是用ajax+asp实现实现，代码如下：一个Ajax 请求文件ajax_func.js放在ajax文件夹里：var http_request = false;function send_request(method,url
复制链接

扫一扫