Ajax简单示例之改变下拉框动态生成表格
生活随笔
收集整理的這篇文章主要介紹了
Ajax简单示例之改变下拉框动态生成表格
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
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 3.示例數據庫下載area1.rar ?
總結
以上是生活随笔為你收集整理的Ajax简单示例之改变下拉框动态生成表格的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Ajax实现DataGrid/DataL
- 下一篇： Ajax实现无刷新三联动下拉框