Ajax简单示例之改变下拉框动态生成表格
1.建立一个aspx页面,html代码
<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代码
{
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简单示例之改变下拉框动态生成表格相关推荐
- DataGridView下拉框动态赋值以及事件处理
第一种: 下拉框动态赋值: private void Form1_Load(object sender, EventArgs e) { //获取数据源list ...
- Excel — 动态图表(下拉框动态图)
下拉框动态图:根据下拉框选择的值,使图表动态变化.过程如下 [开发者工具]->[插入]->[组合框] 画好下拉框后,右键->[设置控件格式] 选择[数据源区域].[单元格链接] 查看 ...
- Vue下拉框动态加载数据
Vue下拉框动态加载数据 <template><a-select v-model="model.type" show-search placeholder=&qu ...
- Ajax获取Json对象绑定下拉框
分享个小实例,废话少说,直接上代码..... 贴上JS代码: Js代码 1 <script type="text/javascript"> 2 $ ...
- jquery ajax 找到数据怎样放到下拉框里_闲话Excel之简易数据动态图表的制作
今天早上你的老板和你说让你把今年1-6月份的员工业绩做一份报表发给他,务必简介直观,但是你目前手头就以下的数据: 你肯定不能将这个发给你老板啊,既不简洁也不直观,该咋办呢?我建议用动态图表的方法,且听 ...
- html下拉框动态增加成员,JavaScript实现左右下拉框动态增删示例
选中下拉框中的选项实现左移右移 效果: 1. Html部分代码 左1 左2 左3 左4 左5 左6 左7 左8 左9 左10 右1 右2 右3 右4 右5 右6 右7 2. JavaScript脚本代 ...
- layui 数据表格下拉框_LayUi数据表格中嵌套下拉框
layui嵌套下拉框实用方法(附效果图) 在做项目时遇到一个问题,在layui 的数据表格table里面如何做一个下拉框呢?效果图如下: 这样的效果想必是最理想的了 思路分析: 我们可以通过layui ...
- select下拉框动态获取数据
需求:select下拉框中的数据是从后台接口中获取的,而不是自己写的假数据 步骤:(这里是用jquery及ajax发送请求) 一.页面上导入jquery在线资源 二.代码实列如下(仅供参考) < ...
- 微搭低代码实现下拉框动态填充值
有个粉丝问我,微搭的下拉框如何自动填充值 想问一下,下拉控件需要绑定数据源里面的列表,这个需要怎么做,自己研究了蛮久也没弄出来,需要参考您哪一篇教程? 一般你字段设置为枚举类型就可以,如果是动态的,你 ...
最新文章
- 柳传志:华为采取自主研发,联想通过并购实现品牌国际化
- 模块导入---如何在一个文件中导入其它模块,来调用它的变量、函数等,以节省代码量...
- IOTA 交易,确认和共识
- 博图如何读取mysql数据_博途使用小结:从SQL中读取数据并给变量赋值
- Android TextView 手动上下滑动
- Juypter 打开其他路径文件
- python常用的装饰器库_Python中的各种装饰器详解
- 万万没想到,JVM内存区域的面试题也可以问的这么难?
- [leetcode]136. 只出现一次的数字
- .NET组件和COM组件之间的相互操作方法
- 带你领略Object.assign()方法的风骚操作
- 小程序开发视频教程免费下载
- js调用Python函数
- A股和债市短期看好,后期需提防回调,建议逐步减仓观望
- Java基础5多线程技术
- Lecture 4 Microphone
- OSChina 周四乱弹 —— 为什么现在社会越来越鄙视直男
- sql to_char 日期转换字符串
- 深度揭秘高频交易盈利方式
- Ubuntu20.04挂载4T数据盘流程
热门文章
- 贪吃蛇计时器怎么编写java_java编写简易贪吃蛇游戏
- javascript的date对象
- 1数字图像获取:1.1图像数字化
- 深度学习 -- TensorFlow(9)循环神经网络RNN
- C和C++混合编程的Makefile的编写!
- Maya制作风格化的女性跑步动画学习教程
- 双重指针作为函数参数的妙用
- gcc中-pthread和-lpthread的区别
- 《DDIA》读书笔记(一):可靠性、可扩展性、可维护性
- C++多线程:异步操作std::async和std::promise