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 extend 的简单实例
Sep 18 Javascript
自己动手实现jQuery Callbacks完整功能代码详解
Nov 25 Javascript
JS实现弹性漂浮效果的广告代码
Sep 02 Javascript
JS实现简单的二维矩阵乘积运算
Jan 26 Javascript
JavaWeb表单及时验证功能在输入后立即验证(含用户类型,性别,爱好...的验证)
Jun 09 Javascript
vue 右键菜单插件 简单、可扩展、样式自定义的右键菜单
Nov 29 Javascript
AngularJS实现的自定义过滤器简单示例
Feb 02 Javascript
vue router总结 $router和$route及router与 router与route区别
Jul 05 Javascript
JavaScript面向对象中接口实现方法详解
Jul 24 Javascript
js实现点赞效果
Mar 16 Javascript
vue计算属性+vue中class与style绑定(推荐)
Mar 30 Javascript
html5以及jQuery实现本地图片上传前的预览代码实例讲解
Mar 01 jQuery
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
《DOTA3》开发工作已经开始 《DOTA3》将代替《DOTA2》
2021/03/06 DOTA
使用Limit参数优化MySQL查询的方法
2008/11/12 PHP
PHP 出现乱码和Sessions验证问题的解决方法!
2008/12/06 PHP
php读取flash文件高宽帧数背景颜色的方法
2015/01/06 PHP
PHP实现四种基础排序算法的运行时间比较(推荐)
2016/08/11 PHP
PHP版微信第三方实现一键登录及获取用户信息的方法
2016/10/14 PHP
ThinkPHP下表单令牌错误与解决方法分析
2017/05/20 PHP
php实现的AES加密类定义与用法示例
2018/01/29 PHP
使用微信小程序开发前端【快速入门】
2016/12/05 Javascript
Bootstrap列表组学习使用
2017/02/09 Javascript
浅谈Vuex@2.3.0 中的 state 支持函数申明
2017/11/22 Javascript
ES6使用export和import实现模块化的方法
2018/09/10 Javascript
浅谈vue方法内的方法使用this的问题
2018/09/15 Javascript
JS中创建自定义类型的常用模式总结【工厂模式,构造函数模式,原型模式,动态原型模式等】
2019/01/19 Javascript
浅谈javascript中的prototype和__proto__的理解
2019/04/07 Javascript
有趣的JavaScript隐式类型转换操作实例分析
2020/05/02 Javascript
[02:56]DOTA2矮人直升机 英雄基础教程
2013/11/26 DOTA
[01:59]翻天覆地,因你而变,7.20版本地图更新速览
2018/11/24 DOTA
详解Python中break语句的用法
2015/05/14 Python
Python实现程序的单一实例用法分析
2015/06/03 Python
Nginx搭建HTTPS服务器和强制使用HTTPS访问的方法
2015/08/16 Python
Python编程中的文件操作攻略
2015/10/16 Python
Python中的类与类型示例详解
2019/07/10 Python
python Web flask 视图内容和模板实现代码
2019/08/23 Python
python tkinter之 复选、文本、下拉的实现
2020/03/04 Python
Python 执行矩阵与线性代数运算
2020/08/01 Python
Python爬虫如何破解JS加密的Cookie
2020/11/19 Python
Lungolivigno Fashion官网:高级时装在线购物
2020/10/17 全球购物
泰国最新活动和优惠:Megatix
2020/05/07 全球购物
学校对教师的评语
2014/04/28 职场文书
大学新生军训自我鉴定范文
2014/09/13 职场文书
2015教师个人工作总结范文
2015/03/31 职场文书
优秀党员主要事迹材料
2015/11/04 职场文书
初中历史教学反思
2016/02/19 职场文书
导游词之包公祠
2019/11/25 职场文书
解决Mysql多行子查询的使用及空值问题
2022/01/22 MySQL