利用XMLHTTP實(shí)現(xiàn)的二級(jí)連動(dòng)Select
關(guān)于XMLHTTP.可以說,是一個(gè)很好的接合劑.把客戶端和服務(wù)端的距離拉近了.
利用XMLHTTP.我們可以實(shí)現(xiàn)很多好的想法.
這文章.實(shí)現(xiàn)了二級(jí)連動(dòng)Select.
傳統(tǒng)二級(jí)連動(dòng)是把所有的數(shù)據(jù)都傳到有客戶端..
利用XMLHTTP.我們可以實(shí)時(shí)地返回我們所需要的數(shù)據(jù).
select.htm
<script language="Javascript">
function GetResult(str)
{
/*
*--------------- GetResult(str) -----------------
* GetResult(str)
* 功能:通過XMLHTTP發(fā)送請求,返回結(jié)果.
* 參數(shù):str,字符串,發(fā)送條件.
* 實(shí)例: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();
//服務(wù)器端處理返回的是經(jīng)過escape編碼的字符串.
//通過XMLHTTP返回?cái)?shù)據(jù),開始構(gòu)建Select.
BuildSel(unescape(oBao.responseText),document.all.sel2)
}
function BuildSel(str,sel)
{
/*
*--------------- BuildSel(str,sel) -----------------
* BuildSel(str,sel)
* 功能:通過str構(gòu)建Select.
* 參數(shù):str,字符串,由服務(wù)端返回的.有特定結(jié)構(gòu)"字符串1,字符串2,字符串3"
* 參數(shù):sel,要構(gòu)建的Select
* 實(shí)例:BuildSel(unescape(oBao.responseText),document.all.sel2)
* author:wanghr100(灰豆寶寶.net)
* update:2004-5-27 19:02
*--------------- BuildSel(str,sel) -----------------
*/
//先清空原來的數(shù)據(jù).
sel.options.length=0;
var arrstr = new Array();
arrstr = str.split(",");
//開始構(gòu)建新的Select.
for(var i=0;i<arrstr.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 服務(wù)器端處理.
<% @Language="Javascript" %>
<%
function OpenDB(sdbname)
{
/*
*--------------- OpenDB(sdbname) -----------------
* OpenDB(sdbname)
* 功能:打開數(shù)據(jù)庫sdbname,返回conn對象.
* 參數(shù):sdbname,字符串,數(shù)據(jù)庫名稱.
* 實(shí)例: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)
{
//遍歷所有適合的數(shù)據(jù)放入arrResult數(shù)組中.
arrResult[arrResult.length] = rs("city").Value;
rs.MoveNext();
}
//escape解決了XMLHTTP。中文處理的問題.
//數(shù)組組合成字符串.由","字符串連接.
Response.Write(escape(arrResult.join(",")));
%>
數(shù)據(jù)庫設(shè)計(jì)
data.mdb
表china.
字段
id 自動(dòng)編號(hào)
province 文本
city 文本
表:china 數(shù)據(jù):
id province city
1 福建省 福州市
2 福建省 廈門市
3 福建省 泉州市
4 湖北省 武漢市
5 湖北省 荊州市
6 湖北省 宜昌市
7 遼寧省 沈陽市
8 遼寧省 大連市
9 遼寧省 盤錦市
相關(guān)文章
[ASP.NET AJAX]Function對象及Type類的方法介紹
[ASP.NET AJAX]Function對象及Type類的方法介紹...2007-01-01Ajax的內(nèi)部實(shí)現(xiàn)機(jī)制、原理與實(shí)踐小結(jié)
AJAX全稱為"Asynchronous JavaScript and XML"(異步JavaScript和XML),Ajax不是一個(gè)技術(shù),它實(shí)際上是幾種技術(shù),每種技術(shù)都有其獨(dú)特這處,合在一起就成了一個(gè)功能強(qiáng)大的新技術(shù)。2010-06-06ajax傳遞多個(gè)參數(shù)具體實(shí)現(xiàn)
在使用ajax過程中,傳遞參數(shù)是在所難免的尤其在特殊情況下傳遞多個(gè)參數(shù),下面與大家分享下具體的是實(shí)現(xiàn)方法,感興趣的朋友可以參考下哈2013-05-05ajax讀取數(shù)據(jù)庫內(nèi)容實(shí)現(xiàn)二級(jí)聯(lián)動(dòng)下拉選擇菜單示例
本文為大家介紹下使用ajax技術(shù)讀取數(shù)據(jù)庫內(nèi)容并生成二級(jí)聯(lián)動(dòng)下拉選擇菜單,具體實(shí)現(xiàn)如下,感興趣的朋友可以參考下,希望對大家有所幫助2013-07-07往xml中更新節(jié)點(diǎn)的實(shí)例代碼
下面小編就為大家?guī)硪黄鵻ml中更新節(jié)點(diǎn)的實(shí)例代碼。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-07-07Ajax上傳實(shí)現(xiàn)根據(jù)服務(wù)器端返回?cái)?shù)據(jù)進(jìn)行js處理的方法
這篇文章主要介紹了Ajax上傳實(shí)現(xiàn)根據(jù)服務(wù)器端返回?cái)?shù)據(jù)進(jìn)行js處理的方法,實(shí)例分析了Ajax請求及java處理并返回服務(wù)器端數(shù)據(jù)請求的相關(guān)技巧2015-07-07Ajax實(shí)現(xiàn)靜態(tài)刷新頁面過程帶加載旋轉(zhuǎn)圖片
當(dāng)然你也可以使用jquery或者ajax寫動(dòng)態(tài)加載table的方式來實(shí)現(xiàn),方式多種多樣,感興趣的朋友可以了解下,希望本文提供的靜態(tài)刷新頁面對你學(xué)習(xí)ajax有所幫助2013-02-02一個(gè)偽ajax圖片上傳代碼實(shí)現(xiàn)示例
這篇文章主要介紹了自己寫的一個(gè)偽ajax圖片上傳實(shí)現(xiàn)代碼,需要的朋友可以參考下2014-03-03基于Jquery.history解決ajax的前進(jìn)后退問題
本文主要給大家介紹基于Jquery.history解決ajax的前進(jìn)后退問題,涉及到j(luò)query前進(jìn)后退相關(guān)方面的知識(shí),本文內(nèi)容經(jīng)典,非常具有參考價(jià)值,特此把jquery前進(jìn)后退相關(guān)知識(shí)分享在腳本之家網(wǎng)站供大家參考2015-10-10