Ajax异步调用示例
与上篇关于Ajax的文章相比，此次Ajax更着重在前端页面异步显示后台数据库里的字段， 主体思想与上篇相似，重点是DAL层得到存储过程中返回的表集合DataSet,在一般存储过程中拼接字符串时，将表一行的数据分别做成键值对的形式
1.前端页面包含脚本（ajax）和基本的HTML标记 以方便大家对应查找和理解
View Code
1 function InitData() { //页面加载时调用此事件
2 $.ajax({
3 type: "POST",
4 url: "/AjaxRequest/GetUserList.ashx", //链接到相应的一般处理程序
5 data: { state: 1 },
6 success: function (data) {
7 if (data != null) {
8 var html = "<li ><span class=\"lb1\">ID</span><span>用户名</span><span >创建时间 </span><span >执行操作</span></li>"; //拼接字符串标签并放入变量html里，注意：拼接时“需要转义-如第一个span里的类
9 $.each(data, function (i, n) { //jquery循环输出列表里的每行数据，如果用javascript可以考虑用for循环
10 html += "<li><span class=\"lb1\">" + (1 + i) + "</span><span >" + n.USER_Name + "</span><span >" + n.USER_Time + "</span><span ><a href=\"javascript:editProvince('" + this.USER_Name + "'," + this.USER_ID + "," + (i + 1) + ")\">[编辑]</a></span><span ><a href=\"javascript:deleteProvince(" + this.USER_ID + ");\" OnClick=\"javascript:return confirm('您确定要删除 "+this.USER_Name+"?');\" >[删除]</a></span></li>";
11 //依然是拼接要显示的标记，注意：变量html+=，另外如果是内容部分或者每行不一样的部分要用变量
12 //变量用data[i].键（就可以得到url指向的文件中json对象里该键对应的值）的形式，键是指一般处理程序文件中拼接JSON对象时的键值对，
13 //n在此处表示data[i]（是jquery离得each用法，如果是再javascript中可以用data[i].USER_ID）
14 });
15 $("#list_ul").append(html); //获取要显示列表的ul，用append添加拼接好的标签字符串
16
17 }
18 else {
19 alert("Error!");
20 }
21 }
22 })
23 }
2.一般处理程序GetUserList.ashx，将从底层得到的DataSet里的数据转换成json对象返回给调用页面
View Code
1 public void ProcessRequest(HttpContext context)
2 {
3 context.Response.ContentType = "text/plain";
4 string result =" [";
5 string name=string.Empty;
6 int? state = null;
7 DateTime time;
8 Int Id=0;
9 if (!string.IsNullOrEmpty(context.Request["state"]))
10 state = Convert.ToInt32(context.Request["state"]);
11 DataSet _set=new BLL.Province().GetProvinceList(state);
12 foreach(DataRow dr in _set.Tables[0].Rows)
13 {
14 name=Convert.ToString(dr["USER_Name"]);
15 Id=Convert.ToInt32(dr["USER_ID"]);
16 time=Convert.ToDateTime(dr["USER_Time"]);
17 result+="{\"USER_Name\":\""+name+"\",\"USER_ID\":\""+Id+"\",\"USER_Time\":\""+time+"\"},";
18 }
19 resul= result.Trim(",")+"] ";
20 context.Response.Write(result);
21 }
请大家多多指教 ^^
