当前位置:编程学习 > JS >>

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)
         {
             context.Response.ContentType = "text/plain";
             string result =" [";
             string name=string.Empty;
             int? state = null;
             DateTime time;
             Int Id=0;
             if (!string.IsNullOrEmpty(context.Request["state"]))
                 state = Convert.ToInt32(context.Request["state"]);
             DataSet _set=new BLL.Province().GetProvinceList(state);
             foreach(DataRow dr in _set.Tables[0].Rows)
             {
               name=Convert.ToString(dr["USER_Name"]);
               Id=Convert.ToInt32(dr["USER_ID"]);
               time=Convert.ToDateTime(dr["USER_Time"]);
 result+="{"USER_Name":""+name+"","USER_ID":""+Id+"","USER_Time":""+time+""},";
             }
             resul= result.Trim(",")+"] ";
             context.Response.Write(result);
         }

补充:网页制作,js教程 
CopyRight © 2012 站长网 编程知识问答 www.zzzyk.com All Rights Reserved
部份技术文章来自网络,