Ajax异步调用详解实例解析
Ajax更着重在前端页面异步显示后台数据库里的字段, 主体思想与上篇相似,重点是DAL层得到存储过程中返回的表集合DataSet,在一般存储过程中拼接字符串时,将表一行的数据分别做成键值对的形式
1.前端页面包含脚本(ajax)和基本的HTML标记 以方便大家对应查找和理解
代码如下 | 复制代码 |
function InitData() { //页面加载时调用此事件 $.ajax({ type: "POST", url: "/AjaxRequest/GetUserList.ashx", //链接到相应的一般处理程序 data: { state: 1 }, success: function (data) { if (data != null) { var html = "<li ><span class="lb1">ID</span><span>用户名</span><span >创建时间 </span><span >执行操作</span></li>"; //拼接字符串标签并放入变量html里,注意:拼接时“需要转义-如第一个span里的类 $.each(data, function (i, n) { //jquery循环输出列表里的每行数据,如果用javascript可以考虑用for循环 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>"; //依然是拼接要显示的标记,注意:变量html+=,另外如果是内容部分或者每行不一样的部分要用变量 //变量用data[i].键(就可以得到url指向的文件中json对象里该键对应的值)的形式,键是指一般处理程序文件中拼接JSON对象时的键值对, //n在此处表示data[i](是jquery离得each用法,如果是再javascript中可以用data[i].USER_ID) }); $("#list_ul").append(html); //获取要显示列表的ul,用append添加拼接好的标签字符串 } else { alert("Error!"); } } }) } |
2.一般处理程序GetUserList.ashx,将从底层得到的DataSet里的数据转换成json对象返回给调用页面
代码如下 | 复制代码 |
public void ProcessRequest(HttpContext context) |
补充:网页制作,js教程