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 ajax提交整个表单元素的快捷办法
Mar 27 Javascript
将文本输入框内容加入表中的js代码
Aug 18 Javascript
jquery 操作iframe的几种方法总结
Dec 13 Javascript
js鼠标滑过图片震动特效的方法
Feb 17 Javascript
jQuery的deferred对象使用详解
Sep 25 Javascript
详解Angular.js指令中scope类型的几种特殊情况
Feb 21 Javascript
详谈commonjs模块与es6模块的区别
Oct 18 Javascript
vue将时间戳转换成自定义时间格式的方法
Mar 02 Javascript
jQuery滑动效果实现方法分析
Sep 05 jQuery
node.js基于socket.io快速实现一个实时通讯应用
Apr 23 Javascript
javascript sort()对数组中的元素进行排序详解
Oct 13 Javascript
vue 使用插槽分发内容操作示例【单个插槽、具名插槽、作用域插槽】
Mar 06 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
CI框架中cookie的操作方法分析
2014/12/12 PHP
Symfony控制层深入详解
2016/03/17 PHP
Laravel统计一段时间间隔的数据方法
2019/10/09 PHP
PHP7 弃用功能
2021/03/09 PHP
Js的MessageBox
2006/12/03 Javascript
一行命令搞定node.js 版本升级
2014/07/20 Javascript
jQuery简单实现input文本框内灰色提示文本效果的方法
2015/12/02 Javascript
JS中如何实现复选框全选功能
2016/12/19 Javascript
简单实现IONIC购物车功能
2017/01/10 Javascript
详解webpack3如何正确引用并使用jQuery库
2017/08/26 jQuery
JavaScript实现单击网页任意位置打开新窗口与关闭窗口的方法
2017/09/21 Javascript
JS关于刷新页面的相关总结
2018/05/09 Javascript
发布一款npm包帮助理解npm的使用
2019/01/03 Javascript
微信小程序wepy框架学习和使用心得详解
2019/05/24 Javascript
js针对图片加载失败的处理方法分析
2019/08/24 Javascript
vue 使用post/get 下载导出文件操作
2020/08/07 Javascript
JavaScript实现刮刮乐效果
2020/11/01 Javascript
Python选择排序、冒泡排序、合并排序代码实例
2015/04/10 Python
Python中字典与恒等运算符的用法分析
2019/08/22 Python
Python中断多重循环的几种方式详解
2020/02/10 Python
解决keras backend 越跑越慢问题
2020/06/18 Python
PyCharm2019.3永久激活破解详细图文教程,亲测可用(不定期更新)
2020/10/29 Python
TensorFlow的环境配置与安装方法
2021/02/20 Python
详解canvas绘制网络字体几种方法
2019/08/27 HTML / CSS
澳大利亚工具仓库:Tools Warehouse
2018/10/15 全球购物
美国最好的钓鱼、狩猎和划船装备商店:Bass Pro Shops
2018/12/02 全球购物
澳大利亚体育和露营装备在线/实体零售商:Find Sports
2020/06/03 全球购物
跟单文员岗位职责
2014/01/03 职场文书
自荐书4要点
2014/01/25 职场文书
竞选部门副经理的自荐书范文
2014/02/11 职场文书
汽车机电维修工求职信
2014/09/30 职场文书
南京大屠杀观后感
2015/06/02 职场文书
运动会班级前导词
2015/07/20 职场文书
小学生反邪教心得体会
2016/01/15 职场文书
SQL Server2019数据库之简单子查询的具有方法
2021/04/27 SQL Server
Nginx跨域问题解析与解决
2022/08/05 Servers