ajax无刷新联动DropDownList

没接触过ajax，又苦与项目中经常遇到联动的情况，看了小山的例子，发现一不小心爱上ajax了http://www.cnblogs.com/singlepine/archive/2005/10/19/257954.aspx
修改了下小山的程序，支持了后台读取数据设定 DropDownList的selected值。
TextBox17用来读取省id，TextBox18用来读取城市id，TextBox19用来读取注册时的城市id。

由于ajax还是需要从服务器得到数据，所以不能用function selected()
    ... {
    cityResult();
     var DDLid=document.getElementById("Useraction1_DropDownList2");
    var TBox=document.getElementById("Useraction1_Textbox19");
    DDLid.value=TBox.value;
    getData();
   }
 的形式，，而需要设定一定的延时，window.setTimeout( " selected_getdata() " , 500 );       


// 城市------------------------------
function  cityResult() 
             ... { 
                var city=document.getElementById("Useraction1_DropDownList1");
                liandong.GetCityList(city.value,get_city_Result_CallBack);
            }
  function  selected()
    ... {
    cityResult();
    window.setTimeout("selected_getdata()",500);       
   }
   
    function  selected_getdata()
    ... {
    var DDLid=document.getElementById("Useraction1_DropDownList2");
    var TBox=document.getElementById("Useraction1_Textbox19");
    DDLid.value=TBox.value;
    getData();
   }
             function  get_city_Result_CallBack(response)
             ... {
                if (response.value != null)
                ...{                    
                    //debugger;
                    document.all("Useraction1_DropDownList2").length=0;　　　　            
　　　　            var ds = response.value;
                    if(ds != null && typeof(ds) == "object" && ds.Tables != null)
                    ...{                    
                         var DDLid=document.all("Useraction1_DropDownList2");
　　　　　　             for(var i=0; i<ds.Tables[0].Rows.length; i++)
　　　　                ...{
　　　　                    var name=ds.Tables[0].Rows[i].shiname;
　　　　　　                var id=ds.Tables[0].Rows[i].shiid;
　　　　　　                DDLid.options.add(new Option(name,id));　　　　　　               
　　　　　　             }
　　　　　　           　getData();          
　　　　            }
                }                
                return
            }
         
             function  getData()
             ... {
                var province=document.getElementById("Useraction1_DropDownList1");
                var pindex = province.selectedIndex;
                var pValue = province.options[pindex].value;
               // var pText  = province.options[pindex].text;
                
               var city=document.getElementById("Useraction1_DropDownList2");
               var txt1=document.getElementById("Useraction1_TextBox17"); 
               var txt2=document.getElementById("Useraction1_TextBox18");
      if(city.length>0)
               ...{
     var cindex = city.selectedIndex;
     var cValue = city.options[cindex].value;
     //var cText  = city.options[cindex].text;
                                
     txt1.value=pValue;     
     txt2.value=cValue;
    
      }
      else
      ...{
     txt1.value=pValue;
     txt2.value=0;
        
      }
}

< tr >
          < td  style ="WIDTH: 108px"  align ="right"  width ="108"  bgColor ="#ffffff" >< asp:textbox  id ="TextBox17"  runat ="server"  Width ="0px" ></ asp:textbox >< asp:textbox  id ="TextBox18"  runat ="server"  Width ="0px" ></ asp:textbox >< asp:textbox  id ="Textbox19"  runat ="server"  Width ="0px" ></ asp:textbox ></ td >
          < td  bgColor ="#ffffff"  colSpan ="2" > 省： < asp:dropdownlist  id ="DropDownList1"  runat ="server" ></ asp:dropdownlist > 市： < asp:dropdownlist  id ="DropDownList2"  runat ="server" ></ asp:dropdownlist ></ td >
         </ tr >

 

后台：

Textbox19.Text  =  reader.Item( 1 )
Response.Write( " <script for=window event=onload>selected();</ "   &   " script> " )

 

 liandong.vb

Public   Class liandong Class liandong
    Public Function GetProvinceList()Function GetProvinceList() As DataSet
        Dim sql As String
        sql = "select shengid,shengname from sheng order by shengorder"
        Return GetDataSet(sql)
    End Function

    Public Function GetDataSet()Function GetDataSet(ByVal sql As String) As DataSet
        Dim myDataAdapter As SqlClient.SqlDataAdapter
        myDataAdapter = New SqlClient.SqlDataAdapter(sql, getdata.myconn)
        Dim myDataSet As DataSet
        myDataSet = New DataSet
        myDataAdapter.Fill(myDataSet)
        Return myDataSet
    End Function


    'Ajax  Start
    'Get the name of city

    <Ajax.AjaxMethod(Ajax.HttpSessionStateRequirement.Read)> _
    Public Function GetCityList()Function GetCityList(ByVal shengid As Integer) As DataSet
        Dim sql As String
        sql = "select shiid,shiname from shi where shengid=" & shengid & "order by shiorder"
        Return GetDataSet(sql)
    End Function

End Class

 

另：Ajax实现调用后台方法
首先把Ajax.dll文件复制到项目所在文件夹下的bin下，然后在VS项目的引用添加Ajax.dll文件。
 
其次在Web.Config文件中的<system.web>里添加如下代码：
 <httpHandlers>
   <add verb="POST,GET" path="ajax/*.ashx" type="Ajax.PageHandlerFactory, Ajax" />
 </httpHandlers>
其中Ajax是指刚才引用的dll文件。
 
新建一个AjaxMethod类，添加方法的方式如下：
[Ajax.AjaxMethod(Ajax.HttpSessionStateRequirement.Read)]
 public  DataSet GetCityList()
 {
   //TODO：Add Your Codes here
 }
 
接着在所建页面的cs文件(如WebForm1.aspx.cs)中的Page_load()中添加如下代码即可在页面调用后台方法：
Utility.RegisterTypeForAjax(typeof(AjaxTest.AjaxMethod));
对于AjaxTest.AjaxMethod，AjaxTest为命名空间，AjaxMethod为AjaxTest下的类。
 
在前台我们就可以用以下方式调用后台的方法了：
AjaxMethod.GetCityList(value,get_city_Result_CallBack);
function get_city_Result_CallBack(response){}
第一行中的value为要传到后台的值，get_city_Result_CallBack为前台的一个方法函数。
执行完第一句之后就转到执行第二句，response为后台返回前台的值，这个值不一定是一个数，此例中它是一个DataSet。