利用XMLHTTP实现的二级连动Select

我爱的人姓井i

我爱的人姓井i

2016-02-19 12:59

下面请跟着图老师小编一起来了解下利用XMLHTTP实现的二级连动Select,精心挑选的内容希望大家喜欢,不要忘记点个赞哦!
这是继 "利用XMLHTTP无刷新获取数据" 的另一篇关于XMLHTTP的应用. 
关于XMLHTTP.可以说,是一个很好的接合剂.把客户端和服务端的距离拉近了. 
利用XMLHTTP.我们可以实现很多好的想法. 
这文章.实现了二级连动Select. 
传统二级连动是把所有的数据都传到有客户端.. 
利用XMLHTTP.我们可以实时地返回我们所需要的数据. 
select.htm 
代码如下:

script language="Javascript" 
function GetResult(str) 

/* 
 *--------------- GetResult(str) ----------------- 
 * GetResult(str)  
 * 功能:通过XMLHTTP发送请求,返回结果. 
 * 参数:str,字符串,发送条件. 
 * 实例:GetResult(document.all.userid.value); 
 * author:wanghr100(灰豆宝宝.net) 
 * update:2004-5-27 19:02 
 *--------------- GetResult(str) ----------------- 
 */ 
    var oBao = new ActiveXObject("Microsoft.XMLHTTP"); 
    oBao.open("POST","Server.asp?sel="+str,false); 
    oBao.send(); 
    //服务器端处理返回的是经过escape编码的字符串. 
    //通过XMLHTTP返回数据,开始构建Select. 
    BuildSel(unescape(oBao.responseText),document.all.sel2) 

function BuildSel(str,sel) 

/* 
 *--------------- BuildSel(str,sel) ----------------- 
 * BuildSel(str,sel)  
 * 功能:通过str构建Select. 
 * 参数:str,字符串,由服务端返回的.有特定结构"字符串1,字符串2,字符串3" 
 * 参数:sel,要构建的Select 
 * 实例:BuildSel(unescape(oBao.responseText),document.all.sel2) 
 * author:wanghr100(灰豆宝宝.net) 
 * update:2004-5-27 19:02 
 *--------------- BuildSel(str,sel) ----------------- 
 */ 
    //先清空原来的数据. 
    sel.options.length=0; 
    var arrstr = new Array(); 
    arrstr = str.split(","); 
    //开始构建新的Select. 
    for(var i=0;iarrstr.length;i++) 
    { 
        sel.options[sel.options.length]=new Option(arrstr,arrstr) 
    } 

/script 
select name="sel" onChange="GetResult(this.value)" 
option value=""请选择 
option value="福建省"福建省 
option value="湖北省"湖北省 
option value="辽宁省"辽宁省 
select 
select name="sel2"/select

server.asp  服务器端处理. 
代码如下:

% @Language="Javascript" % 

function OpenDB(sdbname) 

/* 
 *--------------- OpenDB(sdbname) ----------------- 
 * OpenDB(sdbname)  
 * 功能:打开数据库sdbname,返回conn对象. 
 * 参数:sdbname,字符串,数据库名称. 
 * 实例:var conn = OpenDB("database.mdb"); 
 * author:wanghr100(灰豆宝宝.net) 
 * update:2004-5-12 8:18 
 *--------------- OpenDB(sdbname) ----------------- 
 */ 
    var connstr = "Provider=Microsoft.Jet.OLEDB.4.0; Data Source="+Server.MapPath(sdbname); 
    var conn = Server.CreateObject("ADODB.Connection"); 
    conn.Open(connstr); 
    return conn; 

var oConn = OpenDB("data.mdb"); 
var province = Request("sel"); 
var arrResult = new Array(); 
var sql = "select city from china where province='"+province+"'"; 
var rs = Server.CreateObject("ADODB.Recordset"); 
rs.Open(sql,oConn,1,1); 
while(!rs.EOF) 

    //遍历所有适合的数据放入arrResult数组中. 
    arrResult[arrResult.length] = rs("city").Value; 
    rs.MoveNext(); 

//escape解决了XMLHTTP。中文处理的问题. 
//数组组合成字符串.由","字符串连接. 
Response.Write(escape(arrResult.join(","))); 
%

数据库设计 
data.mdb 
表china. 
字段 
id  自动编号 
province 文本 
city  文本 
表:china 数据:  
id province city 
1 福建省  福州市 
2 福建省  厦门市 
3 福建省  泉州市 
4 湖北省  武汉市 
5 湖北省  荆州市 
6 湖北省  宜昌市 
7 辽宁省  沈阳市 
8 辽宁省  大连市 
9 辽宁省  盘锦市
展开更多 50%)
分享

猜你喜欢

利用XMLHTTP实现的二级连动Select

Web开发
利用XMLHTTP实现的二级连动Select

二级连动的另一个不错的实现方法

Web开发
二级连动的另一个不错的实现方法

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

二级缓存

电脑入门
二级缓存

用ASP实现自动建站.实现虚拟二级目录

ASP
用ASP实现自动建站.实现虚拟二级目录

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

二级域名转向类

Web开发
二级域名转向类

二级页面不能全屏

电脑入门
二级页面不能全屏

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

PHP Ajax实现页面无刷新发表评论

PHP Ajax实现页面无刷新发表评论

Win10安全模式怎么进?

Win10安全模式怎么进?
下拉加载更多内容 ↓