使用jquery+json实现ajax的方法

前端之家收集整理的这篇文章主要介绍了使用jquery+json实现ajax的方法前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

好啦,进入正题吧。

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

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

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

 
 
  1. Arguments.OrderQueryQuery;
  2. 2
  3. 3publicvoidProcessRequest(HttpContextcontext)
  4. 4{
  5. 5stringcmd=context.Request.QueryString["__cmd__"];//命令
  6. 6stringpagenum=context.Request.QueryString["__pagenum__"];//页数
  7. 7stringtype=context.Request.QueryString["__type__"];//类型
  8. 8result=newStringBuilder();
  9. 9if(cmd==null||cmd==string.Empty||type==null||type==string.Empty)
  10. 10{
  11. 11context.Response.Write(result.ToString());
  12. 12return;
  13. 13}
  14. 14switch(cmd)
  15. 15{
  16. 16case"getorder":
  17. 17Query=newArguments.OrderQuery();
  18. 18Query.Status=newint[]{(int)Arguments.Named.OrderStatus.待发单,(int)Arguments.Named.OrderStatus.下发中,(int)Arguments.Named.OrderStatus.新订单,(int)Arguments.Named.OrderStatus.已完成};
  19. 19Query.TimeStart=DateTime.Parse("2007-1-100:00:00");
  20. 20Query.TimeEnd=DateTime.Now;
  21. 21Query.PageSize=25;
  22. 22Query.PageIndex=WebCommon.Basal.ConvertInt(pagenum)-1;
  23. 23if(type=="custom")
  24. 24{
  25. 25Query.Email=context.Request.QueryString["__email__"];
  26. 26Query.OrderCode=context.Request.QueryString["__ordercode__"];
  27. 27}
  28. 28else
  29. 29{
  30. 30Query.Email=string.Empty;
  31. 31Query.OrderCode=string.Empty;
  32. 32}
  33. 33
  34. 34intrecordnum=0;
  35. 35IList<Model.OrderInfo>OrderList=WebCommon.DataSource.SearchOrderList(Query,refrecordnum);
  36. 36FormatJson(OrderList,recordnum);//格式化数据为Json的方法
  37. 37context.Response.Write(result.ToString());
  38. 38break;
  39. 39}
  40. 40}
  41. 41
  42. 42///<Summary>
  43. 43///将数据构造为Json格式
  44. 44///数据构造后的格式为:{order:[{OrderCode:200901010001,Status:下发单,CreateTime:2009-1-1}],Count:1}
  45. 45///</Summary>
  46. 46privatevoidFormatJson(IList<Model.OrderInfo>orderlist,intrecordnum)
  47. 47{
  48. 48if(orderlist==null||orderlist.Count<=0)
  49. 49return;
  50. 50result.Append("{Order:[");
  51. 51for(inti=0;i<orderlist.Count;i++)
  52. 52{
  53. 53result.Append("{OrderCode:\""+orderlist[i].Code+"\",Status:\""+FormatStatus(orderlist[i].Status)+"\",CreateTime:\""+orderlist[i].CreateTime+"\"}");
  54. 54if((i+1)<orderlist.Count)
  55. 55result.Append(",");
  56. 56}
  57. 57intpagenum=recordnum%25>0?(recordnum/25)+1:recordnum/25;//计算总页数
  58. 58result.Append("],Count:\""+pagenum+"\"}");
  59. 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的一个子集,所以不论是使用方式还是执行效率相信都不会让你失望的。

猜你在找的Json相关文章