服务器维护网站维护数据维护系统安全配置
专业定制网站企业建站一条龙、软件定制开发、系统集成
稳定虚机备案一条龙，稳定快捷通道
服务理念诚信守诺客户至上专业精神专心贯注

Ajax简单示例之改变下拉框动态生成表格

作者：黑客防线网安Ajax教程基地来源：黑客防线网安Ajax教程基地浏览次数：0

　　1.建立一个aspx页面，html代码
　　<html xmlns="http://www.w3.org/1999/xhtml" >
　　<head runat="server">
　　    <title>Untitled Page</title>
　　    <script type="text/javascript">
　　        var xmlHttp;

　　        function createXMLHttpRequest()
　　        {
　　            if (window.ActiveXObject)
　　            {
　　                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
　　            }
　　            else if (window.XMLHttpRequest)
　　            {
　　                xmlHttp = new XMLHttpRequest();
　　            }
　　        }
　　
　　        function startRequest()
　　        {
　　            //debugger;
　　            var ProvinceID=document.getElementById("DropDownList1");
　　            createXMLHttpRequest();
　　            xmlHttp.onreadystatechange = handleStateChange;
　　            xmlHttp.open("GET", "?ProvinceID="+ProvinceID.value, true);
　　            xmlHttp.send(null);
　　        }
　　
　　        function handleStateChange()
　　        {
　　            if(xmlHttp.readyState == 4) //0(未初始化);1(正在装载);2 (装载完毕);3 (交互中);4 (完成)
　　            {
　　                if(xmlHttp.status == 200) //200(OK);404(not found)
　　                {
　　                    document.getElementById("gridiv").innerHTML=xmlHttp.responseText;
　　                }
　　            }
　　        }
　　        </script>
　　</head>
　　<body>
　　    <form id="form1" runat="server">
　　    <div>
　　        <asp:DropDownList ID="DropDownList1" runat="server">
　　        </asp:DropDownList>
　　    </div>
　　    <div id ="gridiv"></div>
　　    </form>
　　</body>
　　</html>2.cs代码
　　using System.Data.SqlClient;
　　protected void Page_Load(object sender, EventArgs e)
　　    {
　　        if (!Page.IsPostBack)
　　        {
　　            this.DropDownList1.Attributes.Add("onchange", "return startRequest();");
　　            ListProvince();
　　            if (ProvinceID != "")
　　            {
　　                GetCityByProvinceID(ProvinceID);
　　            }
　　        }
　　    }

　　    property#region property
　　    private string ProvinceID
　　    {
　　        get
　　        {
　　            if (Request["ProvinceID"] != null && Request["ProvinceID"].ToString() != "")
　　            {
　　                return Request["ProvinceID"];
　　            }
　　            else
　　            {
　　                return "";
　　            }
　　        }
　　    }
　　    #endregion

　　    GetDataSet#region GetDataSet
　　    private DataSet GetDataSet(string sql)
　　    {
　　        string constring=System.Configuration.ConfigurationSettings.AppSettings["ConnectionString"];
　　        SqlDataAdapter    sda =new SqlDataAdapter(sql,constring);
　　        DataSet ds=new DataSet();
　　        sda.Fill(ds);
　　        return ds;
　　    }
　　    #endregion

　　    GetCityByProvinceID#region GetCityByProvinceID
　　    private void GetCityByProvinceID(string ProvinceID)
　　    {
　　        string connStr = ConfigurationSettings.AppSettings["ConnectionString"];
　　        SqlConnection conn = new SqlConnection(connStr);
　　        string sql = "select * from city where father='" + ProvinceID + "'";
　　        SqlCommand cmd = new SqlCommand(sql, conn);
　　        conn.Open();
　　        SqlDataReader dr = cmd.ExecuteReader();

　　        string s = @"<table cellspacing='0' cellpadding='4' border='0' id='GridView1' style='color:#333333;border-collapse:collapse;'>";
　　        s+="<tr style='color:White;background-color:#990000;font-weight:bold;'>";
　　            s+="<th scope='col'>流水号</th><th scope='col'>代号</th><th scope='col'>城市</th></tr>";
　　        int m = 0;
　　        while (dr.Read())
　　        {
　　            if (m % 2 == 0)
　　            {
　　                s += "<tr style='color:#333333;background-color:#FFFBD6;'>";
　　            }
　　            else
　　            {
　　                s += "<tr style='color:#333333;background-color:White;'>";
　　            }
　　            m++;
　　            s += "<td>" + dr["id"] + "</td>";
　　            s += "<td>" + dr["cityID"] + "</td>";
　　            s += "<td>" + dr["city"] + "</td>";
　　            s += "</tr>";
　　        }
　　        s+="</table>";
　　        dr.Close();
　　        conn.Close();
　　        this.Response.Write(s);
　　        this.Response.End();
　　    }
　　    #endregion

　　    ListProvince#region ListProvince
　　    private void ListProvince()
　　    {
　　        string sql = "select * from province";
　　        DataSet ds = GetDataSet(sql);
　　        DropDownList1.DataSource = ds;
　　        DropDownList1.DataTextField = "province";
　　        DropDownList1.DataValueField = "provinceID";
　　        DropDownList1.DataBind();
　　    }
　　    #endregion