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 相关文章推荐
鼠标经过的文本框textbox变色
May 21 Javascript
jquery $.ajax相关用法分享
Mar 16 Javascript
jQuery滚动加载图片效果的实现
Mar 06 Javascript
js判断浏览器版本以及浏览器内核的方法
Jan 20 Javascript
Jquery插件实现点击获取验证码后60秒内禁止重新获取
Mar 13 Javascript
基于jQuery实现多层次的手风琴效果附源码
Sep 21 Javascript
JavaScript面试题(指针、帽子和女朋友)
Nov 23 Javascript
JS实现touch 点击滑动轮播实例代码
Jan 19 Javascript
vue2.0数据双向绑定与表单bootstrap+vue组件
Feb 27 Javascript
基于Vuejs和Element的注册插件的编写方法
Jul 03 Javascript
详解Vue项目在其他电脑npm run dev运行报错的解决方法
Oct 29 Javascript
微信小程序如何加载数据库真实数据的实现
Mar 04 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实现让页面只能被百度gogole蜘蛛访问的方法
2009/12/29 PHP
PHP改进计算字符串相似度的函数similar_text()、levenshtein()
2014/10/27 PHP
解决laravel 5.1报错:No supported encrypter found的办法
2017/06/07 PHP
php设计模式之策略模式应用案例详解
2019/06/17 PHP
2010年最佳jQuery插件整理
2010/12/06 Javascript
javascript跨域刷新实现代码
2011/01/01 Javascript
js面向对象的写法
2016/02/19 Javascript
第五章之BootStrap 栅格系统
2016/04/25 Javascript
Cropper.js 实现裁剪图片并上传(PC端)
2017/08/20 Javascript
Angular2 http jsonp的实例详解
2017/08/31 Javascript
Vue常用的几个指令附完整案例
2018/11/06 Javascript
Vue源码解析之数据响应系统的使用
2019/04/24 Javascript
node爬取新型冠状病毒的疫情实时动态
2020/02/06 Javascript
vue自定义标签和单页面多路由的实现代码
2020/05/03 Javascript
微信小程序基于高德地图API实现天气组件(动态效果)
2020/10/22 Javascript
vue内置组件keep-alive事件动态缓存实例
2020/10/30 Javascript
python显示天气预报
2014/03/02 Python
python求pi的方法
2014/10/08 Python
Python编程实现正则删除命令功能
2017/08/30 Python
Pycharm创建文件时自动生成文件头注释(自定义设置作者日期)
2020/11/24 Python
HTML5 canvas实现移动端上传头像拖拽裁剪效果
2016/03/14 HTML / CSS
美国著名珠宝品牌之一:Jared The Galleria Of Jewelry
2016/10/01 全球购物
加拿大最大的钻石商店:Peoples Jewellers
2018/01/01 全球购物
出纳工作岗位责任制
2014/02/02 职场文书
法律系毕业生求职信
2014/05/28 职场文书
广场舞大赛策划方案
2014/05/31 职场文书
企业文化标语口号
2014/06/09 职场文书
颂军魂爱军营演讲稿
2014/09/13 职场文书
民主生活会对照检查材料思想汇报
2014/09/27 职场文书
检察院院长群众路线教育实践活动个人整改措施
2014/10/04 职场文书
大学生就业推荐表自我评价
2015/03/02 职场文书
先进教师个人主要事迹材料
2015/11/03 职场文书
go web 预防跨站脚本的实现方式
2021/06/11 Golang
Oracle配置dblink访问PostgreSQL的操作方法
2022/03/21 PostgreSQL
利用Redis实现点赞功能的示例代码
2022/06/28 Redis
win10拖拽文件时崩溃怎么解决?win10文件不能拖拽问题解决方法
2022/08/14 数码科技