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 相关文章推荐
jquery序列化表单去除指定元素示例代码
Apr 10 Javascript
javascript结合Canvas 实现简易的圆形时钟
Mar 11 Javascript
jQuery根据用户电脑是mac还是pc加载对应样式的方法
Jun 26 Javascript
探索angularjs+requirejs全面实现按需加载的套路
Feb 26 Javascript
分享一个原生的JavaScript拖动方法
Sep 25 Javascript
Angular实现模版驱动表单的自定义校验功能(密码确认为例)
May 17 Javascript
webpack手动配置React开发环境的步骤
Jul 02 Javascript
js实现敏感词过滤算法及实现逻辑
Jul 24 Javascript
element el-input directive数字进行控制
Oct 11 Javascript
Node如何后台数据库使用增删改查功能
Nov 21 Javascript
js实现打字小游戏
Dec 17 Javascript
React forwardRef的使用方法及注意点
Jun 13 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
php中的注释、变量、数组、常量、函数应用介绍
2012/11/16 PHP
php不使用插件导出excel的简单方法
2014/03/04 PHP
PHP中的替代语法简介
2014/08/22 PHP
Laravel5中防止XSS跨站攻击的方法
2016/10/10 PHP
PHP基于面向对象封装的分页类示例
2019/03/15 PHP
jQuery Form 页面表单提交的小例子
2013/11/15 Javascript
JS继承用法实例分析
2015/02/05 Javascript
JavaScript基础知识之方法汇总结
2016/01/24 Javascript
js实现常用排序算法
2016/08/09 Javascript
JS实现漂亮的时间选择框效果
2016/08/20 Javascript
jQuery实现右键菜单、遮罩等效果代码
2016/09/27 Javascript
jQuery+CSS3实现点赞功能
2017/03/13 Javascript
详解vue-cli + webpack 多页面实例配置优化方法
2017/07/13 Javascript
js+html5实现侧滑页面效果
2017/07/15 Javascript
记录微信小程序 height: calc(xx - xx);无效问题
2019/12/30 Javascript
解决vuex刷新数据消失问题
2020/11/12 Javascript
video.js添加自定义组件的方法
2020/12/09 Javascript
[02:36]DOTA2英雄基础教程 帕格纳
2014/01/20 DOTA
[01:10:16]DOTA2上海特级锦标赛B组资格赛#2 Fnatic VS Spirit第一局
2016/02/27 DOTA
[04:17]DOTA2完美盛典,rOtk、BurNIng携手巴图演唱《倔强》
2017/11/28 DOTA
python解析中国天气网的天气数据
2014/03/21 Python
python装饰器初探(推荐)
2016/07/21 Python
对python 各种删除文件失败的处理方式分享
2018/04/24 Python
Pycharm远程连接服务器并实现代码同步上传更新功能
2020/02/25 Python
python 实现rolling和apply函数的向下取值操作
2020/06/08 Python
全球知名旅游社区巴西站点:TripAdvisor巴西
2016/07/21 全球购物
Lowe’s加拿大:家居装修、翻新和五金店
2019/12/06 全球购物
枚举与#define宏的区别
2014/04/30 面试题
"引用"与多态的关系
2013/02/01 面试题
妇科医生自荐信
2013/11/05 职场文书
心碎乌托邦的创业计划书范文
2013/12/26 职场文书
年会活动策划方案
2014/01/23 职场文书
购房协议书范本
2014/04/11 职场文书
员工开除通知书
2015/04/25 职场文书
奥特曼十大神器:奥特手镯在榜,第一是贝利亚的神器
2022/03/18 日漫
Linux服务器离线安装 nginx的详细步骤
2022/06/16 Servers