• 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 }


    请大家多多指教 ^^

  • 相关阅读:
    Angular 中自定义模块
    16 Angular【无人点餐无人收银系统案例】路由配置、菜品列表制作、请求数据渲染二维数组、 动态路由传值 、绑定html【基础项目
    13-angular中的路由
    Angular 互 中的数据交互 (get jsonp post )
    11-Rxjs异步数据流编程-Rxjs快速入门教程
    10 Angular中的生命周期函数--动态挂载销毁组件
    Angular 父子组件以及组件之间通讯
    Angular 中的 Dom 操作以及@ViewChild 、 Angular 执行 css3 动画
    Angular中的服务 以及自定义服务-数据持久化
    Stack与Queue
  • 原文地址:https://www.cnblogs.com/ereryday/p/2261368.html
Copyright © 2020-2023  润新知