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 相关文章推荐
判断iframe是否加载完成的完美方法
Jan 07 Javascript
js 页面关闭前的出现提示的实现代码
May 25 Javascript
javascript中方便增删改cookie的一个类
Oct 11 Javascript
jQuery实现Meizu魅族官方网站的导航菜单效果
Sep 14 Javascript
jQuery使用siblings获取某元素所有同辈(兄弟姐妹)元素用法示例
Jan 30 Javascript
vue组件中点击按钮后修改输入框的状态实例代码
Apr 14 Javascript
在Vue组件上动态添加和删除属性方法
Feb 23 Javascript
JS对象与json字符串相互转换实现方法示例
Jun 14 Javascript
在layui框架中select下拉框监听更改事件的例子
Sep 20 Javascript
微信小程序实现上拉加载功能示例【加载更多数据/触底加载/点击加载更多数据】
May 29 Javascript
vue-以文件流-blob-的形式-下载-导出文件操作
Aug 07 Javascript
使用webpack和rollup打包组件库的方法
Feb 25 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
如何过滤高亮显示非法字符
2006/10/09 PHP
PHP下MAIL的另一解决方案
2006/10/09 PHP
杏林同学录(三)
2006/10/09 PHP
php文字水印和php图片水印实现代码(二种加水印方法)
2013/12/25 PHP
PHP获取数组最后一个值的2种方法
2015/01/21 PHP
ucenter中词语过滤原理分析
2016/07/13 PHP
PHP判断是否是微信打开还是浏览器打开的方法
2019/02/27 PHP
初学JavaScript_03(ExtJs Grid的简单使用)
2008/10/02 Javascript
javascript 学习之旅 (2)
2009/02/05 Javascript
JS面向对象、prototype、call()、apply()
2009/05/14 Javascript
js中document.getElementByid、document.all和document.layers区分介绍
2011/12/08 Javascript
JavaScript 操作table,可以新增行和列并且隔一行换背景色代码分享
2013/07/05 Javascript
JQuery获取样式中的background-color颜色值的问题
2013/08/20 Javascript
node.js使用require()函数加载模块
2014/11/26 Javascript
一个php+js实时显示时间问题
2015/10/12 Javascript
客户端验证用户名和密码的方法详解
2016/06/16 Javascript
谈谈jQuery之Deferred源码剖析
2016/12/19 Javascript
Angular中点击li标签实现更改颜色的核心代码
2017/12/08 Javascript
JS基于递归实现网页版计算器的方法分析
2017/12/20 Javascript
AjaxUpLoad.js实现文件上传功能
2018/03/02 Javascript
JS实现左边列表移到到右边列表功能
2018/03/28 Javascript
微信小程序动态添加view组件的实例代码
2019/05/23 Javascript
layui中的switch开关实现方法
2019/09/03 Javascript
[00:57]林俊杰助阵DOTA2亚洲邀请赛
2015/01/28 DOTA
python实现红包裂变算法
2016/02/16 Python
Python中多线程的创建及基本调用方法
2016/07/08 Python
python引入导入自定义模块和外部文件的实例
2017/07/24 Python
python入门前的第一课 python怎样入门
2018/03/06 Python
python3处理含有中文的url方法
2018/05/10 Python
详解python中sort排序使用
2019/03/23 Python
python 实现图片批量压缩的示例
2020/12/18 Python
Helly Hansen工作服美国官方网上商店:为最恶劣的环境
2019/09/04 全球购物
如何在.net Winform里面显示PDF文档
2012/09/11 面试题
小学教育见习报告
2014/10/31 职场文书
2014年学生会工作总结
2014/11/07 职场文书
创业计划书之都市休闲农庄
2019/12/28 职场文书