Jquery getJSON方法详细分析


Posted in Javascript onDecember 26, 2013

准备工作
·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 相关文章推荐
取得传值的函数
Oct 27 Javascript
js ondocumentready onmouseover onclick onmouseout 样式
Jul 22 Javascript
js通过元素class名字获取元素集合的具体实现
Jan 06 Javascript
js中string转int把String类型转化成int类型
Aug 13 Javascript
js实现iframe跨页面调用函数的方法
Dec 13 Javascript
jquery+javascript编写国籍控件
Feb 12 Javascript
jQuery表单对象属性过滤选择器实例详解
Sep 13 Javascript
Vue 使用中的小技巧
Apr 26 Javascript
VUE基于NUXT的SSR 服务端渲染
Nov 30 Javascript
使用VUE+iView+.Net Core上传图片的方法示例
Jan 04 Javascript
Electron-vue开发的客户端支付收款工具的实现
May 24 Javascript
Vue 实现前进刷新后退不刷新的效果
Jun 14 Javascript
JQuery判断HTML元素是否存在的两种解决方法
Dec 26 #Javascript
JS 仿腾讯发表微博的效果代码
Dec 25 #Javascript
javascript使用定时函数实现跳转到某个页面
Dec 25 #Javascript
JS不间断向上滚动效果代码
Dec 25 #Javascript
js中同步与异步处理的方法和区别总结
Dec 25 #Javascript
在javascript中实现函数数组的方法
Dec 25 #Javascript
js 时间格式与时间戳的相互转换示例代码
Dec 25 #Javascript
You might like
在Zeus Web Server中安装PHP语言支持
2006/10/09 PHP
PHP 和 XML: 使用expat函数(一)
2006/10/09 PHP
PHP设计模式之装饰者模式代码实例
2015/05/11 PHP
PHP中preg_match函数正则匹配的字符串长度问题
2015/05/27 PHP
PHP的JSON封装、转变及输出操作示例
2019/09/27 PHP
PHP 使用位运算实现四则运算的代码
2021/03/09 PHP
如何实现动态删除javascript函数
2007/05/27 Javascript
各浏览器中querySelector和querySelectorAll的实现差异分析
2012/05/23 Javascript
js实时获取系统当前时间实例代码
2013/06/28 Javascript
jQuery中:only-child选择器用法实例
2015/01/03 Javascript
JavaScript更改原始对象valueOf的方法
2015/03/19 Javascript
Js+php实现异步拖拽上传文件
2015/06/23 Javascript
在Node.js应用中使用Redis的方法简介
2015/06/24 Javascript
详细介绍jQuery.outerWidth() 函数具体用法
2015/07/20 Javascript
win7下安装配置node.js+express开发环境
2015/12/06 Javascript
JavaScript jQuery 中定义数组与操作及jquery数组操作
2015/12/18 Javascript
jquery 获取select数组与name数组长度的实现代码
2016/06/20 Javascript
浅谈Cookie的生命周期问题
2016/08/02 Javascript
BootStrap框架个人总结(bootstrap框架、导航条、下拉菜单、轮播广告carousel、栅格系统布局、标签页tabs、模态框、菜单定位)
2016/12/01 Javascript
微信小程序 轮播图swiper详解及实例(源码下载)
2017/01/11 Javascript
基于angular2 的 http服务封装的实例代码
2017/06/29 Javascript
vue-cli3.0 脚手架搭建项目的过程详解
2018/10/19 Javascript
vue2.0自定义指令示例代码详解
2019/04/25 Javascript
[02:08]我的刀塔不可能这么可爱 胡晓桃_1
2014/06/20 DOTA
[01:55]《走出家门看比赛》——DOTA2 2015国际邀请赛同城线下观战
2015/07/18 DOTA
[50:20]DOTA2上海特级锦标赛主赛事日 - 5 总决赛Liquid VS Secret第四局
2016/03/06 DOTA
Python中如何使用if语句处理列表实例代码
2019/02/24 Python
什么是Python中的顺序表
2020/06/02 Python
Waterford加拿大官方网站:世界著名的水晶杯品牌
2016/11/01 全球购物
小学防溺水制度
2014/01/29 职场文书
爱祖国爱家乡演讲稿
2014/09/02 职场文书
某集团股份有限公司委托书样本
2014/09/24 职场文书
卫生保健工作总结2015
2015/05/18 职场文书
工程进度款催款函
2015/06/24 职场文书
2016公务员年度考核评语
2015/12/01 职场文书
Python 装饰器(decorator)常用的创建方式及解析
2022/04/24 Python