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 相关文章推荐
Javascript写了一个清除“logo1_.exe”的杀毒工具(可扫描目录)
Feb 09 Javascript
JavaScript声明变量时为什么要加var关键字
Sep 29 Javascript
使用堆实现Top K算法(JS实现)
Dec 25 Javascript
jQuery验证插件validate使用详解
May 11 Javascript
Javascript基础知识盲点总结之函数
May 15 Javascript
angularjs ui-router中路由的二级嵌套
Mar 10 Javascript
JS获取鼠标位置距浏览器窗口距离的方法示例
Apr 11 Javascript
JavaScript重复元素处理方法分析【统计个数、计算、去重复等】
Dec 14 Javascript
JavaScript笛卡尔积超简单实现算法示例
Jul 30 Javascript
如何在JavaScript中优雅的提取循环内数据详解
Mar 04 Javascript
layui时间控件选择时间范围的实现方法
Sep 28 Javascript
vue proxy 的优势与使用场景实现
Jun 15 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实现批量查询清除一句话后门的代码
2008/01/20 PHP
用PHP将网址字符串转换成超链接(网址或email)
2010/05/25 PHP
PHP持久连接mysql_pconnect()函数使用介绍
2012/02/05 PHP
javascript 年月日联动实现核心代码
2009/12/21 Javascript
将HTMLCollection/NodeList/伪数组转换成数组的实现方法
2011/06/20 Javascript
jquery实现带二级菜单的导航示例
2014/04/28 Javascript
jQuery中:enabled选择器用法实例
2015/01/04 Javascript
bootstrap日期插件daterangepicker使用详解
2017/10/19 Javascript
JavaScript 隐性类型转换步骤浅析
2018/03/15 Javascript
JavaScript事件发布/订阅模式原理与用法分析
2018/08/21 Javascript
vue引入axios同源跨域问题
2018/09/27 Javascript
微信小程序实现顶部下拉菜单栏
2018/11/04 Javascript
js遍历详解(forEach, map, for, for...in, for...of)
2019/08/28 Javascript
javascript写一个ajax自动拦截并下载数据代码实例
2019/09/07 Javascript
vue + elementUI实现省市县三级联动的方法示例
2019/10/29 Javascript
JS实现简单贪吃蛇小游戏
2020/10/28 Javascript
js实现简易计算器小功能
2020/11/18 Javascript
vue.js watch经常失效的场景与解决方案
2021/01/07 Vue.js
python3序列化与反序列化用法实例
2015/05/26 Python
Window10+Python3.5安装opencv的教程推荐
2018/04/02 Python
对Xpath 获取子标签下所有文本的方法详解
2019/01/02 Python
如何基于python操作excel并获取内容
2019/12/24 Python
python使用正则表达式(Regular Expression)方法超详细
2019/12/30 Python
python批量处理txt文件的实例代码
2020/01/13 Python
AUC计算方法与Python实现代码
2020/02/28 Python
python爬虫中PhantomJS加载页面的实例方法
2020/11/12 Python
HTML5+CSS3网页加载进度条的实现,下载进度条的代码实例
2016/12/30 HTML / CSS
伦敦剧院及景点门票:Encore Tickets
2018/07/01 全球购物
LivingSocial英国:英国本地优惠
2019/02/22 全球购物
服务员自我评价
2014/01/25 职场文书
外联部演讲稿
2014/05/24 职场文书
大学生个人求职信
2014/06/02 职场文书
暑假社会实践心得体会
2014/09/02 职场文书
学期个人工作总结
2015/02/13 职场文书
2016年公务员六五普法心得体会
2016/01/21 职场文书
2016年艾滋病宣传活动总结
2016/04/01 职场文书