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 相关文章推荐
prototype Element学习笔记(篇一)
Oct 26 Javascript
jquery的ajax请求全面了解
Mar 20 Javascript
javascript中数组的concat()方法使用介绍
Dec 18 Javascript
JS小游戏之极速快跑源码详解
Sep 25 Javascript
浅谈javascript的call()、apply()、bind()的用法
Feb 21 Javascript
JS函数多个参数默认值指定方法分析
Nov 28 Javascript
vue项目中的webpack-dev-sever配置方法
Dec 14 Javascript
用jquery获取select标签中选中的option值及文本的示例
Jan 25 jQuery
看看“疫苗查询”小程序有温度的代码
Jul 31 Javascript
浅谈在vue中使用mint-ui swipe遇到的问题
Sep 27 Javascript
layer.open弹层查看缩略图的原图,自适应大小的实例
Sep 05 Javascript
Echarts如何重新渲染实例详解
May 30 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 金额数字转换成英文
2010/05/06 PHP
十幅图告诉你什么是PHP引用
2015/02/22 PHP
php实现将上传word文件转为html的方法
2015/06/03 PHP
广告代码静态化js通用函数
2007/05/09 Javascript
使用新的消息弹出框blackbirdjs
2008/10/16 Javascript
var与Javascript变量隐式声明
2009/09/17 Javascript
Dom与浏览器兼容性说明
2010/10/25 Javascript
基于jquery的自定义鼠标提示效果 jquery.toolTip
2010/11/14 Javascript
jQuery表单验证插件formValidator(改进版)
2012/02/03 Javascript
JS声明变量背后的编译原理剖析
2012/12/28 Javascript
JS图片根据鼠标滚动延时加载的实例代码
2013/07/13 Javascript
jquery Tab效果和动态加载的简单实例
2013/12/11 Javascript
javascript使用smipleChart实现简单图表
2015/01/02 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 简史
2015/01/09 Javascript
jQuery实现跟随鼠标运动图层效果的方法
2015/02/02 Javascript
JavaScript给按钮绑定点击事件(onclick)的方法
2015/04/07 Javascript
JavaScript事件用法浅析
2016/10/31 Javascript
解决ztree搜索中多级菜单展示不全问题
2017/07/05 Javascript
简单学习Python time模块
2016/04/29 Python
python中如何正确使用正则表达式的详细模式(Verbose mode expression)
2017/11/08 Python
Python语言描述机器学习之Logistic回归算法
2017/12/21 Python
Python日志syslog使用原理详解
2020/02/18 Python
PyQt5实现简单的计算器
2020/05/30 Python
纯CSS3实现圆圈动态发光特效动画的示例代码
2021/03/08 HTML / CSS
幼儿园儿童节主持词
2014/03/21 职场文书
《窗前的气球》教学反思
2014/04/07 职场文书
法人代表授权委托书
2014/04/08 职场文书
班长竞选演讲稿
2014/04/24 职场文书
优秀的应届生自荐信
2014/05/23 职场文书
村级四风对照检查材料
2014/08/24 职场文书
考试保密承诺书
2014/08/30 职场文书
教师师德师风自我剖析材料
2014/09/29 职场文书
党员自我剖析材料(群众路线)
2014/10/06 职场文书
迁户口计划生育证明
2014/10/19 职场文书
实验室安全管理制度
2015/08/05 职场文书
使用Pytorch实现two-head(多输出)模型的操作
2021/05/28 Python