程序師世界是廣大編程愛好者互助、分享、學習的平台,程序師世界有你更精彩!
首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫知識
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
 程式師世界 >> 編程語言 >> .NET網頁編程 >> .NET實例教程 >> 使用Ajax方案解決地址選框連動問題

使用Ajax方案解決地址選框連動問題

編輯:.NET實例教程
 西廂情緣是一個婚戀交友平台,而絕大多數用戶在選擇婚戀交友對象時往往希望從本地選擇中意的對象進行交往。所以地址信息的錄入應該方便好用。由於將國、省、市三級地址數據保存在客戶端的腳本中會帶來很大的數據量,所以傳統的純JS方式並不是解決地址選擇框連動的良好方案。

  為此,我們采用了AJax技術來實現僅取得所需的相關地址的方式來解決這個問題。服務器首先依據用戶的當前地址將同級的省和市的地址輸出到客戶端,當用戶變動國家或省級地址時,再動態從服務器獲取相關的省級或市級地址數據列表。

以下,是JS代碼示例
<script>
function ChangeStayAddr1(){
    pstfrm.slStayAddr2.options.length = 0;
    var opt1 = new Option ( "選擇", "0" );
    pstfrm.slStayAddr2.options[0]=opt1;
    pstfrm.slStayAddr3.options.length = 0;
    opt1 = new Option ( "選擇", "0" );
    pstfrm.slStayAddr3.options[0]=opt1;
    var url = "GetAreaOptions.ASPx?action=geta2&Pid=" + pstfrm.slStayAddr1.value + "&ListN=pstfrm.slStayAddr2";
    _sendfunc(url,CallForExe);

}
function ChangeStayAddr2(){
    pstfrm.slStayAddr3.options.length = 0;
    var opt1 = new Option ( "選擇", "0" );
    pstfrm.slStayAddr3.options[0]=opt1;
    var url = "GetAreaOptions.ASPx?action=geta3&Pid=" + pstfrm.slStayAddr2.value + "&ListN=pstfrm.slStayAddr3";
    _sendfunc(url,CallForExe);
}
</script>

_sendfunc用於實現異步調用,獲取參數url的返回值,並傳給函數callforexe.
返回值獲得以後,由callforexe實現下拉選擇框option的數據填充!

而GetAreaOptions.ASPx則實現相對較簡單的功能,以utf-8的編碼方式返回請求國,省的下級省,市地址數據。

  1. 上一頁:
  2. 下一頁:
Copyright © 程式師世界 All Rights Reserved