Ajax 级联 使用CallBackObject.js 方法 不使用.net控件

      刚换了一家公司，感觉不错，又有了很大的动力学习，由于以后要用ajax很多，就把使用js的ajax框架学习了一下。学习使用的CallBackObject.js 建议的ajax框架。

   做的是实现地区的无刷新级联

这是主页的html方法   

 <div>
            <font face="宋体"></font>
            <!--省份列表  这里的数据刷新页面时直接去数据库得到。。-->
            <select id="provinceg" style="width: 121px" runat="server" onchange="city_CallBack(this.value)">
                <option value="0">--请选择省-- </option>
            </select>
            <!--城市列表  等到ajax查询出该省份的所有城市，用填充到城市列表中-->
            <select id="city" runat="server" onchange="area_CallBack(this.value)" >
                <option value="0">--请选择市-- </option>
            </select>
            <!--区的列表 -->
            <select id="area" runat="server">
                <option value="0">--请选择区-- </option>
            </select>
        </div>

  前台js 方法:

  

  function city_CallBack(val)
      {
         var city = document.getElementById("city");
         city.disabled=false;  
         
         var area = document.getElementById("area");
         area.disabled=true; 
         area.options.length=1;       
        
         CboCity=new CallBackObject();      
         CboCity.OnCompleteDataSet=addCity_Complete;             
         CboCity.DoCallBack("type=city&id="+val);         
      }

     function addCity_Complete(responseText)
      {         
          if(responseText!=null)
          {
              var dt=responseText.Tables[0];  
              if(dt!=null)
              {
                  document.getElementById("city").options.length=1;
               for(var i=0; i<dt.Rows.length; i++)
               {                
                  var name=dt.Rows[i].name;
                  var id=dt.Rows[i].code
                  document.getElementById("city").options.add(new Option(name,id));
                }
              }                
             
          }else
          {
            document.getElementById("city").options.add(new Option("ERROR","ERROR"));
          }    
        
      }
       function area_CallBack(val)
      {      
        var area = document.getElementById("area");
        area.disabled=false;  
                      
         CboArea=new CallBackObject();  
           
         CboArea.OnCompleteDataSet=addArea_Complete;   
                  
         CboArea.DoCallBack("type=area&id="+val);        
            
      } 
      function addArea_Complete(responseText)
      {
         
            if(responseText!=null)
          {
              var dt=responseText.Tables[0];
             document.getElementById("area").options.length=1;
              for(var i=0; i<dt.Rows.length; i++)
               {                
                  var name=dt.Rows[i].name;
                  var id=dt.Rows[i].code
                  document.getElementById("area").options.add(new Option(name,id));
                }
          }else
          {
            document.getElementById("area").options.add(new Option("ERROR","ERROR"));
          }    
      }     
      

 

js代码的核心方法，

         CboCity=new CallBackObject();      
         CboCity.OnCompleteDataSet=addCity_Complete;       //执行方法      
         CboCity.DoCallBack("type=city&id="+val);  //获取参数

      后台页response一个ds.getXml();前台通过ajax获取 然后通过js自动添加到dropdownlist中。

  下面是前台的主要代码:

 

 

 

 

 protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            DataSet ds = SqlDataAccess.GetProvinceInfo();
            string code, name;
            for (int i = 0; i < ds.Tables[0].Rows.Count; i++)
            {
                code = ds.Tables[0].Rows[i]["code"].ToString();
                name = ds.Tables[0].Rows[i]["name"].ToString();
                this.provinceg.Items.Add(new ListItem(name, code));
            }            
           this.city.Disabled = true;
            this.area.Disabled = true;
        }
        if (Request["type"] == "area")
        { 
            string id = Request["id"];
            getArea(id);    
            
        }
        if (Request["type"] == "city")
        {
            string id = Request["id"];
            getCity(id);

        }
       

    }

    //获取县区
    protected void getArea(string id)
    {
        DataSet ds = SqlDataAccess.GetquInfo(id);      

        Response.ClearContent();
        Response.Cache.SetNoStore();
        Response.ContentType = "text/xml";
        Response.ContentEncoding = System.Text.Encoding.UTF8;
        Response.Write(ds.GetXml());
        Response.End();    
       
    }

    //获取市
    protected void getCity(string id)
    {
        DataSet ds = SqlDataAccess.GetCityInfo(id);       
        Response.ClearContent();
        Response.Cache.SetNoStore();
        Response.ContentType = "text/xml";
        Response.ContentEncoding = System.Text.Encoding.UTF8;
        Response.Write(ds.GetXml());
        Response.End();
    }

 

SqlDataAccess中是基本的读数据库的方法,连接数据库使用的简单的SqlHelper:

 

 

  /// <summary>
    /// 获取省的信息
    /// </summary>
    /// <param name="id"></param>
    /// <returns></returns>
    public static DataSet GetProvinceInfo()
    {

        string sql = "select * from province";
        SqlCommand cmd = new SqlCommand();
        //定义对象资源保存的范围，一旦using范围结束，将释放对方所占的资源
        using (SqlConnection conn = new SqlConnection(SqlHelper.ConnectionStringLocalTransaction))
        {
            //调用执行方法，因为没有参数，所以最后一项直接设置为null
            //注意返回结果是dataset类型
            DataSet myds = SqlHelper.ExecuteDataSet(CommandType.Text, sql);
            return myds;
        }
    }
/// <summary>
/// 获得市的信息
/// </summary>
/// <returns></returns>
    public static DataSet GetCityInfo(string  sheng)
    {

        string sql = "select * from city where provinceId=" + sheng + "";
        SqlCommand cmd = new SqlCommand();
        //定义对象资源保存的范围，一旦using范围结束，将释放对方所占的资源
        using (SqlConnection conn = new SqlConnection(SqlHelper.ConnectionStringLocalTransaction))
        {
            //调用执行方法，因为没有参数，所以最后一项直接设置为null
            //注意返回结果是dataset类型
            DataSet myds = SqlHelper.ExecuteDataSet(CommandType.Text, sql);
            return myds;
        }
    }
    /// <summary>
    /// 获得区的信息
    /// </summary>
    /// <returns></returns>
    public static DataSet GetquInfo(string shi)
    {

        string sql = "select * from area where cityId=" + shi + "";
        SqlCommand cmd = new SqlCommand();
        //定义对象资源保存的范围，一旦using范围结束，将释放对方所占的资源
        using (SqlConnection conn = new SqlConnection(SqlHelper.ConnectionStringLocalTransaction))
        {
            //调用执行方法，因为没有参数，所以最后一项直接设置为null
            //注意返回结果是dataset类型
            DataSet myds = SqlHelper.ExecuteDataSet(CommandType.Text, sql);
            return myds;
        }
    }
    /// <summary>
    /// 
    /// </summary>
    /// <param name="sql"></param>
    /// <returns></returns>
    public static DataSet GetInfo(string sql)
    {
        SqlCommand cmd = new SqlCommand();
        //定义对象资源保存的范围，一旦using范围结束，将释放对方所占的资源
        using (SqlConnection conn = new SqlConnection(SqlHelper.ConnectionStringLocalTransaction))
        {
            //调用执行方法，因为没有参数，所以最后一项直接设置为null
            //注意返回结果是dataset类型
            DataSet myds = SqlHelper.ExecuteDataSet(CommandType.Text, sql);
            return myds;
        }
    }

   Code: 源代码