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 相关文章推荐
HTML-CSS群中单选引发的“事件”
Mar 05 Javascript
dojo 之基础篇
Mar 24 Javascript
Mootools 1.2教程 滚动条(Slider)
Sep 15 Javascript
js事件冒泡实例分享(已测试)
Apr 23 Javascript
删除javascript中注释语句的正则表达式
Jun 11 Javascript
javascript 兼容各个浏览器的事件
Feb 04 Javascript
原生js实现弹出层效果
Jan 20 Javascript
详解Angular之constructor和ngOnInit差异及适用场景
Jun 22 Javascript
js实现图片懒加载效果
Jul 17 Javascript
详解VUE里子组件如何获取父组件动态变化的值
Dec 26 Javascript
vue实现的多页面项目如何优化打包的步骤详解
Jul 19 Javascript
JavaScript Image对象实现原理实例解析
Aug 26 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中unlink()、mkdir()、rmdir()等方法的使用介绍
2012/12/21 PHP
smarty模板局部缓存方法使用示例
2014/06/17 PHP
PHP 实现类似js中alert() 提示框
2015/03/18 PHP
WordPress开发中自定义菜单的相关PHP函数使用简介
2016/01/05 PHP
laravel config文件配置全局变量的例子
2019/10/13 PHP
使用jQuery简化Ajax开发 Ajax开发入门
2009/10/14 Javascript
JavaScript 自动完成脚本整理(33个)
2009/10/20 Javascript
JQuery的自定义事件代码,触发,绑定简单实例
2013/08/01 Javascript
jquery禁止输入数字以外的字符的示例(纯数字验证码)
2014/04/10 Javascript
原生js事件的添加和删除的封装
2014/07/01 Javascript
Bootstrap基本组件学习笔记之按钮组(8)
2016/12/07 Javascript
vue-cli入门之项目结构分析
2017/04/20 Javascript
vue组件 $children,$refs,$parent的使用详解
2017/07/31 Javascript
jQuery实现的简单动态添加、删除表格功能示例
2017/09/21 jQuery
koa上传excel文件并解析的实现方法
2018/08/09 Javascript
vue - props 声明数组和对象操作
2020/07/30 Javascript
简单了解JavaScript作用域
2020/07/31 Javascript
vue中watch和computed的区别与使用方法
2020/08/23 Javascript
[03:46]DAC趣味视频-中文考试.mp4
2017/04/02 DOTA
python多线程抓取天涯帖子内容示例
2014/04/03 Python
python实现在windows服务中新建进程的方法
2015/06/30 Python
Python 多进程并发操作中进程池Pool的实例
2017/11/01 Python
Python算法之图的遍历
2017/11/16 Python
详解python中asyncio模块
2018/03/03 Python
Python实现删除时保留特定文件夹和文件的示例
2018/04/27 Python
Django的用户模块与权限系统的示例代码
2019/07/24 Python
Python Web框架之Django框架Form组件用法详解
2019/08/16 Python
python bluetooth蓝牙信息获取蓝牙设备类型的方法
2019/11/29 Python
英国著名的化妆品折扣网站:Allbeauty.com
2016/07/21 全球购物
德国购买门票网站:ADticket.de
2019/10/31 全球购物
String这个类型的class为何定义成final?
2012/11/13 面试题
外贸主管求职简历的自我评价
2013/10/23 职场文书
公司总经理岗位职责
2014/03/15 职场文书
大学生心理活动总结
2014/07/04 职场文书
妇女工作先进事迹
2014/08/17 职场文书
计生个人工作总结
2015/02/28 职场文书