zoukankan      html  css  js  c++  java
  • 使用jquery+json实现ajax的方法

    在使用Jquery + json 的过程中由于一个小问题没有注意到,程序一直有错误。在网上找了很多JSON方面的文章但基本都是很简单的举例,所以我觉得有必要写一个完整的JQuery + json 实现AJAX的例子,如果可以帮到别人那是最好,否则就当是给自己备忘了吧。

         好啦,进入正题吧。

         关于JSON的介绍网上有很多在这里只简单介绍一下Json表示数据的格式:     

    对象是属性、值对的集合。一个对象的开始于“{”,结束于“}”。每一个属性名和值间用“:”提示,属性间用“,”分隔。
    数组是有顺序的值的集合。一个数组开始于"[",结束于"]",值之间用","分隔。
    值可以是引号里的字符串、数字、true、false、null,也可以是对象或数组。这些结构都能嵌套。
    字符串和数字的定义和C或Java基本一致。
    下面我们使用Ajax获取订单列表数据后格式化为Json的格式后输出。首先我们建立data.ashx文件作为数据请求的处理页面:

    data.ashx 文件处理请求的方法:

    Arguments.OrderQuery Query;
     2
     3 public void ProcessRequest (HttpContext context)
     4     {
     5         string cmd = context.Request.QueryString["__cmd__"]; //命令
     6         string pagenum = context.Request.QueryString["__pagenum__"];//页数
     7         string type = context.Request.QueryString["__type__"];//类型
     8         result = new StringBuilder();       
     9         if (cmd == null || cmd == string.Empty || type==null || type==string.Empty)
    10         {
    11             context.Response.Write(result.ToString());
    12             return;
    13         }
    14         switch (cmd)
    15         {
    16             case "getorder":
    17                 Query = new Arguments.OrderQuery();
    18                 Query.Status = new int[] { (int)Arguments.Named.OrderStatus.待发单, (int)Arguments.Named.OrderStatus.下发中, (int)Arguments.Named.OrderStatus.新订单, (int)Arguments.Named.OrderStatus.已完成 };               
    19                 Query.TimeStart = DateTime.Parse("2007-1-1 00:00:00");
    20                 Query.TimeEnd = DateTime.Now;
    21                 Query.PageSize = 25;
    22                 Query.PageIndex = WebCommon.Basal.ConvertInt(pagenum) - 1;
    23                 if (type == "custom")
    24                 {
    25                     Query.Email = context.Request.QueryString["__email__"];
    26                     Query.OrderCode = context.Request.QueryString["__ordercode__"];
    27                 }
    28                 else
    29                 {
    30                     Query.Email = string.Empty;
    31                     Query.OrderCode = string.Empty;
    32                 }
    33                
    34                 int recordnum = 0;
    35                 IList<Model.OrderInfo> OrderList = WebCommon.DataSource.SearchOrderList(Query, ref recordnum);
    36                 FormatJson(OrderList,recordnum);  //格式化数据为Json的方法             
    37                 context.Response.Write(result.ToString());
    38                 break;
    39         }
    40     }
    41
    42     ///<Summary>
    43     ///将数据构造为Json格式
    44     ///数据构造后的格式为:{order:[{OrderCode:200901010001,Status:下发单,CreateTime:2009-1-1}],Count:1}
    45     ///</Summary>
    46     private void FormatJson(IList<Model.OrderInfo> orderlist,int recordnum)
    47     {
    48         if (orderlist == null || orderlist.Count <= 0)
    49             return;
    50         result.Append("{Order:[");
    51         for (int i = 0; i < orderlist.Count;i++)
    52         {
    53             result.Append("{OrderCode:\"" + orderlist[i].Code + "\",Status:\"" + FormatStatus(orderlist[i].Status) + "\",CreateTime:\"" + orderlist[i].CreateTime + "\"}");
    54             if ((i + 1) < orderlist.Count)
    55                 result.Append(",");
    56         }
    57         int pagenum = recordnum % 25 > 0 ? (recordnum / 25) + 1 : recordnum / 25; //计算总页数
    58         result.Append("],Count:\""+pagenum+"\"}");
    59     }


    数据处理页面写好了,下面我们来写一个前台显示页面(display.aspx),在页面中我们使用Jquery提供的.getJSON方式来访问数据页面。

    JQuery的getJSON方法的原型:$.getJSON(Url,{data:data},callbackfunction)

    url (String) : 发送请求地址。

    data (Map) : (可选) 待发送 Key/value 参数。

    callback (Function) : (可选) 载入成功时回调函数。

    前台显示页面文件 display.aspx的方法:

     function GetData(i)//取值方法,参数i表示页数
     3          {
     4              $.getJSON("data.ashx",{__cmd__:"getorder",__pagenum__:i.toString(),__type__:"all"},GetOrderCallBack);
     5          }
     6                  
     7           function GetOrderCallBack(data)
     8           {
     9               var result = data;
    10               $("#tabOrderList").empty(); 
    11              $.each(result.Order,function(i) //循环获取返回值Order列表中的数据
    12         {
    13              if(result.Order[i]==null)
    14                  return;
    15                  $("#tabOrderList").append("<tr><td>"+result.Order[i].OrderCode+"</td><td>"+result.Order[i].Status+"</td><td>"+result.Order[i].CreateTime+"</td></tr>");
    16              });           
    17              $("#inptSum").val(result.Count);//从json中获取总页数           
    18          }

    好了,就这两步就基本搞定了。是不是很简单啊。

    由于Json是Javascript的一个子集,所以不论是使用方式还是执行效率相信都不会让你失望的。

  • 相关阅读:
    ANSI C 与 C99的不同
    字符串中含有空格的注意事项
    巧用printf函数
    求数列的和
    数值统计
    平方和与立方和
    求奇数的乘积
    第几天?
    细节之重
    用%*c滤掉回车,ASCII码排序
  • 原文地址:https://www.cnblogs.com/linzheng/p/1851813.html
Copyright © 2011-2022 走看看