Ajax简单示例之改变下拉框动态生成表格
来源:互联网 发布:php微信菜单开发 编辑:程序博客网 时间:2024/05/16 18:30
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代码<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>
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 {
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
- Ajax简单示例之改变下拉框动态生成表格
- Ajax简单示例之改变下拉框动态生成表格
- Ajax简单示例之改变下拉框动态生成表格
- Ajax简单示例之改变下拉框动态生成表格
- Ajax简单示例之改变下拉框动态生成表格
- Ajax简单示例之改变下拉框动态生成表格
- Ajax简单示例之改变下拉框动态生成表格
- 动态生成表格示例
- ajax 动态生成二级关联下拉框
- JqGrid之动态改变下拉框-yellowcong
- JQuery Ajax动态生成表格
- Ajax实现,下拉框值改变,异步查询并改变表格内容(SSM框架)
- js动态改变下拉菜单内容示例
- ajax&json实现二级下拉框联动,简单示例
- jquery ajax struts2 级联下拉框 动态生成省市
- ajax智能提示+textbox动态生成下拉框
- Jquery 动态生成表格示例代码
- ajax动态生成表格,增加时间格式化
- Ajax实现无刷新树
- Linux网络编程一步一步学-epoll同时处理海量连接的代码
- Ajax实现在textbox中输入内容,动态从数据库中模糊查询显示到下拉框中
- 提升JSP应用程序的七大绝招
- Ajax实现DataGrid/DataList动态ToolTip
- Ajax简单示例之改变下拉框动态生成表格
- socket编程模型
- Ajax实现无刷新三联动下拉框
- 3G标准基础知识
- 传奇源码分析-服务器端(SelGate服务器分析)
- (3-19)错误:调试失败,因为没有启用集成 Windows 身份验证
- D-Day of .NET 第一天纯自修ASP.NET 感到学习资料太落后了....
- 如何理解c和c ++的复杂类型声明
- php与Ajax实例