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+CSS实现菜单滑动伸展收缩(仿淘宝)
Mar 22 Javascript
AJAX跨域请求json数据的实现方法
Nov 11 Javascript
原生javascript实现DIV拖拽并计算重复面积
Jan 02 Javascript
浅谈Javascript中substr和substring的区别
Sep 30 Javascript
如何使用PHP+jQuery+MySQL实现异步加载ECharts地图数据(附源码下载)
Feb 23 Javascript
Bootstrap 附加导航(Affix)插件实例详解
Jun 01 Javascript
移动适配的几种方案(三种方案)
Nov 25 Javascript
jquery应用实例分享_实现手风琴特效
Feb 01 jQuery
微信小程序云开发 生成带参小程序码流程
May 18 Javascript
对layui初始化列表的CheckBox属性详解
Sep 13 Javascript
Vue中axios拦截器如何单独配置token
Dec 27 Javascript
使用webpack搭建pixi.js开发环境
Feb 12 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函数array_merge用法一例(合并同类数组)
2013/02/03 PHP
CodeIgniter分页类pagination使用方法示例
2016/03/28 PHP
PHP引用的调用方法分析
2016/04/25 PHP
PHP实现批量检测网站是否能够正常打开的方法
2016/08/23 PHP
laravel框架实现敏感词汇过滤功能示例
2020/02/15 PHP
jQuery 表单验证扩展代码(一)
2010/10/11 Javascript
Web 前端设计模式--Dom重构 提高显示性能
2010/10/22 Javascript
JavaScript.The.Good.Parts阅读笔记(一)假值与===运算符
2010/11/16 Javascript
jQuery+css实现的切换图片功能代码
2016/01/27 Javascript
JS实现队列与堆栈的方法
2016/04/21 Javascript
使用jQuery制作基础的Web图片轮播效果
2016/04/22 Javascript
JS实现的五级联动菜单效果完整实例
2017/02/23 Javascript
解决vuecli3.0热更新失效的问题
2018/09/19 Javascript
微信小程序实现获取准确的腾讯定位地址功能示例
2019/03/27 Javascript
Node.js系列之安装配置与基本使用(1)
2019/08/30 Javascript
layer弹窗在键盘按回车将反复刷新的实现方法
2019/09/25 Javascript
javascript实现商品图片放大镜
2019/11/28 Javascript
Vue结合路由配置递归实现菜单栏功能
2020/06/16 Javascript
[04:26]2014DOTA2国际邀请赛-Newbee顺利进入胜者组决赛 独家专访战神7
2014/07/19 DOTA
python 对txt中每行内容进行批量替换的方法
2018/07/11 Python
Python爬虫爬取百度搜索内容代码实例
2020/06/05 Python
python退出循环的方法
2020/06/18 Python
Python基于time模块表示时间常用方法
2020/06/18 Python
基于Python采集爬取微信公众号历史数据
2020/11/27 Python
宝塔面板出现“open_basedir restriction in effect. ”的解决方法
2021/03/14 PHP
工商学院毕业生自荐信
2013/11/12 职场文书
上课迟到检讨书
2014/01/19 职场文书
中班中秋节活动反思
2014/02/18 职场文书
道路建设实施方案
2014/03/18 职场文书
社区爱国卫生月活动总结
2014/06/30 职场文书
2014年党支部书记工作总结
2014/12/04 职场文书
晚会闭幕词
2015/01/28 职场文书
2015年幼儿园安全工作总结
2015/05/12 职场文书
2019年公司快递收发管理制度模板
2019/11/20 职场文书
idea以任意顺序debug多线程程序的具体用法
2021/08/30 Java/Android
用PYTHON去计算88键钢琴的琴键频率和音高
2022/04/10 Python