使用jquery+json实现ajax的方法
2010-10-14 23:31
447 查看
在使用Jquery + json 的过程中由于一个小问题没有注意到,程序一直有错误。在网上找了很多JSON方面的文章但基本都是很简单的举例,所以我觉得有必要写一个完整的JQuery + json 实现AJAX的例子,如果可以帮到别人那是最好,否则就当是给自己备忘了吧。
好啦,进入正题吧。
关于JSON的介绍网上有很多在这里只简单介绍一下Json表示数据的格式:
对象是属性、值对的集合。一个对象的开始于“{”,结束于“}”。每一个属性名和值间用“:”提示,属性间用“,”分隔。
数组是有顺序的值的集合。一个数组开始于"[",结束于"]",值之间用","分隔。
值可以是引号里的字符串、数字、true、false、null,也可以是对象或数组。这些结构都能嵌套。
字符串和数字的定义和C或Java基本一致。
下面我们使用Ajax获取订单列表数据后格式化为Json的格式后输出。首先我们建立data.ashx文件作为数据请求的处理页面:
data.ashx 文件处理请求的方法:
数据处理页面写好了,下面我们来写一个前台显示页面(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的介绍网上有很多在这里只简单介绍一下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的一个子集,所以不论是使用方式还是执行效率相信都不会让你失望的。
相关文章推荐
- JSP+jquery使用ajax方式调用json的实现方法
- 使用jquery+json实现ajax的方法
- JSP+jquery使用ajax方式调用json的实现方法
- 使用jQuery的getJSON方法实现配置信息的状态的异步修改
- Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的使用方法总结
- ajax实例:如何使用json+ajax的方法实现类似前端特效tab切换效果
- 使用Jquery中getJSON和getScript方法实现跨域(转载)
- asp.net下使用jquery 的ajax+WebService+json 实现无刷新取后台值的实现代码
- jQuery使用$.each遍历json数组的简单实现方法
- Jquery调用Ajax实现联动使用json
- 使用JSON与JQuery实现Ajax
- jquery的ajax和getJson跨域获取json数据的实现方法
- SpringMVC(27):json数据的传递处理的示例(实现功能:使用jQuery框架的ajax()方法实现用户信息查看)
- Jquery中 $.get(),$.post(),$.ajax(),$.getJSON()方法的使用与区别
- AJAX Unit02: JSON 、 使用JSON实现数据交换 、 jQuery对AJAX的支持
- 85---ajax实现的传统方式以及jquery方式,jquery方式的五种方法,json对象的转换方法, JSON类型的Result
- ajax-3种数据传输的实现方法(使用jQuery)
- ajax返回的json内容进行排序使用sort()方法实现
- 使用 jquery + json 实现ajax的方法
- 使用jquery实现AJAX技术的几种方法