Jquery getJSON方法详细分析

本篇文章主要是对Jquery getJSON方法进行了详细的分析介绍,需要的朋友可以过来参考下,希望对大家有所帮助

准备工作

·Customer类

代码如下:

public class Customer

{

public int Unid { get; set; }

public string CustomerName { get; set; }

public string Memo { get; set; }

public string Other { get; set; }

}

·服务端处理(Json_1.ashx)

代码如下:

Customer customer = new Customer

{ Unid=1,CustomerName="宋江",Memo="天魁星",Other="黑三郎"};

string strJson = Newtonsoft.Json.JsonConvert.SerializeObject(customer);

context.Response.Write(strJson);

(一)Jquery. getJSON

方法定义:jQuery.getJSON( url, data, callback )

通过get请求得到json数据

·url用于提供json数据的地址页

·data(Optional)用于传送到服务器的键值对

·callback(Optional)回调函数,json数据请求成功后的处理函数

代码如下:

function(data, textStatus) {

// data是一个json对象

// textStatus will be "success"

this; // the options for this ajax request

}

(1)一个对象

代码如下:

$.getJSON(

"webdata/Json_1.ashx",

function(data) {

$("#divmessage").text(data.CustomerName);

}

);

向Json_1.ashx地址请求json数据,接收到数据后,在function中处理data数据。 这里的data的数据是一条记录,对应于一个customer实例,其中的数据以k/v形式存在。即以[object,object]数组形式存在。

{"Unid":1,"CustomerName":"宋江","Memo":"天魁星","Other":"黑三郎"}

所以在访问时,以data.Property来访问,下面以k/v循环来打印这条宋江的记录:

代码如下:

$.getJSON(

"webdata/Json_1.ashx",

function(data) {

var tt="";

$.each(data, function(k, v) {

tt += k + ":" + v + "<br/>";

})

$("#divmessage").html(tt);

});

结果:

Unid:1

CustomerName:宋江

Memo:天魁星

Other:黑三郎

(2)对象数组

Ashx文件(Json_1.ashx)修改:

代码如下:

List<Customer> _list = new List<Customer>();

Customer customer = new Customer

{ Unid=1,CustomerName="宋江",Memo="天魁星",Other="黑三郎"};

Customer customer2 = new Customer

{ Unid = 2, CustomerName = "吴用", Memo = "天机星", Other = "智多星" };

_list.Add(customer);

_list.Add(customer2);

string strJson = Newtonsoft.Json.JsonConvert.SerializeObject(_list);

它生成的json对象的字符串是:

[{"Unid":1,"CustomerName":"宋江","Memo":"天魁星","Other":"黑三郎"},

{"Unid":2,"CustomerName":"吴用","Memo":"天机星","Other":"智多星"}]

这里可以看到做为集合的json对象不是再一条记录,而是2条记录,是一个[[object,object]]数组:[object,object][object,object],而每个[object,object]表示一条记录,对应一个Customer,其实也是k/v的形式,而这个v就是一个Customer对象,而这个k是从0开始的索引。

代码如下:

$.getJSON(

"webdata/Json_1.ashx",

function(data) {

$.each(data, function(k, v) {

alert(k);

});

});

这时,k值为0,1……

列表json对象的方法:

代码如下:

$.getJSON(

"webdata/Json_1.ashx",

function(data) {

var tt = "";

$.each(data, function(k, v) {

$.each(v,function(kk, vv) {

tt += kk + ":" + vv + "<br/>";

});

});

$("#divmessage").html(tt);

});

结果:

Unid:1

CustomerName:宋江

Memo:天魁星

Other:黑三郎

Unid:2

CustomerName:吴用

Memo:天机星

Other:智多星

这里用了嵌套循环,第一个循环用于从List中遍历Customer对象,第二个循环用于从Customer对象中遍历Customer对象的属性,也就是k/v对。

分类:Javascript教程 时间:2012-02-23 人气:1
本文关键词:
分享到:

相关文章

  • JSON(02)JQuery中JSON的解析与应用 2012-09-12

    用JQuery做前端页面与后台程序交互时,JSON起的作用太大了,记录JQuery与之相关的一些东西. 与JSON处理相关的几个函数: 1.将字符串转换为JSON对象 a.JavaScript通过eval来转换,但这种方式不安全,不推荐使用。 var jsonObj=eval(jsonStr); b.JSON.parse方式,但ie6,ie7不支持,需另外去http://www.json.org/js.html下载一个js扩展才可以。 var jsonObj=JSON.parse(jsonStr

  • Jquery解析json数据详解 2013-12-19

    本篇文章主要是对Jquery解析json数据进行了详细的介绍,需要的朋友可以过来参考下,希望对大家有所帮助 最近被jquery折磨了一番,倒腾了一个jquery解析json的demo,本demo想实现从asp.net后台实例化dataSet或者dataTable数据集,将dataSet转换成json并返回给客户端,客户端用jquery getJson方法解析出来并显示在页面上。 首先简单介绍一下getJson方法 Jquery.getJson(url,[data],[callback]) url

  • 点击弹出层ajax php jquery 发送表单 2014-06-19

    点击弹出层ajax php jquery 发送表单 演示 JavaScript Code <script type="text/javascript"> var messageDelay = 2000; // How long to display status messages (in milliseconds) // Init the form once the document is ready $( init ); // Initialize the form functio

  • jquery中全局函数each使用介绍 2014-10-29

      jquery 包含了两个 each 一个是 $().each 另一个是 $.each 区别就在于前一个是 jquery对象的内置函数 而后一个 这是对象的遍历函数   jquery 包含了两个each一个是 $().each 另一个是 $.each 区别就在于前一个是jquery对象的内置函数 而后一个 这是对象的遍历函数 一般用于ajax中获取不同的对象数据进行遍历以json为例 jquery 的getJSON 快捷方法可以便利的取得 指定url中的json文件 jquery 会内置的调用

  • 深入理解JSON数据源格式 2012-02-13

    JSON 在很多场合下作为数据格式比XML要更加方便。JSON的数据由对象、数组和元素等格式组成。每种格式都可以包含合法的JavaScript数据类型 JSON [ JavaScript Object Notation ]:JavaScript 对象表示法。 它是一种轻量级的数据交换格式。 JSON 在很多场合下作为数据格式比XML 要更加方便。 JSON 的数据由对象、数组和元素等格式组成。每种格式都可以包含合法的JavaScript 数据类型。 在JavaScript 中,可以通过eval(

  • ASP.NET MVC 实现基于 XMLHttpRequest long polling 的 Comet 2013-07-12

    本教程简单介绍关于ASP.NET MVC 实现基于 XMLHttpRequest long polling 的 Comet的应用,有需要可以看看。 我个人的理解是,看起来就像在Web环境中客户端能订阅服务端的事件,服务器端通过事件去通知客户端。如果服务器端用 ASP.NET 来实现,可以利用 .NET 的事件驱动机制,很有意思,下面的示例代码将展示这一点。 先看Web前端js代码: 代码如下 复制代码 jQuery(function ($) { function long_polling() {

  • 用 SpriteKit 做一个逃逸游戏 (2) 2014-01-21

    在initWithSize:方法末尾加入下列代码: // 1 创建物理形状(以屏幕为边界) SKPhysicsBody* borderBody = [SKPhysicsBody bodyWithEdgeLoopFromRect:self.frame]; // 2 将物理形状设为场景的身体 self.physicsBody = borderBody; // 3 设置阻力系数 self.physicsBody.friction = 0.0f; 创建一个 SKPhysicsBody。 SKPhysic

  • 求数组的最大值,次大值 2014-09-03

    在期末微机原理考试的时候,老师给我们出了一个题是求一段数的最大值,次大值,当时题目的要求使用汇编语言写的,这里我使用C++将相关算法表现出来。 求数组的最大值是很简单的,基本上每个会编程的人都会求,但是求次大值就稍微有点弯了…… 我当时的思路是这样的: 因为这一段数字都是正整数,所以我通过两次循环比较来实现,第一次遍历求得最大值,然后将最大值对应的位置的数字置零,第二次遍历求得次大值。 两次遍历的方法: #include using namespace std; int fun_max(int

  • Extjs高级应用(一):实现GridPanel的单元格多选模组 2014-12-01

    之前在项目中突然遇见一个很奇怪的需求,要求单元格能和Excel一样进行多选,比如框选其中一个矩形区域,然后复制到同页面另一个Grid中!!并添加统计报表功能。当时这个需求就把我们都怔住了!很变态很强悍的需求,因为这个模块是一个基于报表的统计功能,使用了一个第三方的报表工具,但是页面展示非常难看。。。。。客户就对我们说,为什么不用Ext来制作报表呢。呵呵最后当时是被我们回绝了,因为这确实是对我们团队来说难度太大,而且成本太高。具备统计功能的Ext Grid再加上可编辑等等,就几乎是一个网页版的Ex

Copyright (C) quwantang.com, All Rights Reserved.

趣玩堂 版权所有 京ICP备15002868号

processed in 0.124 (s). 10 q(s)