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编程起步(第四课)
Feb 27 Javascript
基于jquery的lazy loader插件实现图片的延迟加载[简单使用]
May 07 Javascript
js限制文本框输入长度两种限制方式(长度、字节数)
Dec 19 Javascript
js通过iframe加载外部网页的实现代码
Apr 05 Javascript
jquery之别踩白块游戏的简单实现
Jul 25 Javascript
JS简单实现自定义右键菜单实例
May 31 Javascript
浅谈es6语法 (Proxy和Reflect的对比)
Oct 24 Javascript
微信实现自动跳转到用其他浏览器打开指定APP下载
Feb 15 Javascript
微信自定义分享链接信息(标题,图片和内容)实现过程详解
Sep 04 Javascript
layui 关闭open弹出框 刷新table表格页面的方法
Sep 16 Javascript
Javascript表单序列化原理及实现代码详解
Oct 30 Javascript
测量JavaScript函数的性能各种方式对比
Apr 27 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文件下载处理方法分析
2015/04/22 PHP
smarty简单应用实例
2015/11/03 PHP
php版微信公众平台入门教程之开发者认证的方法
2016/09/26 PHP
PHP内置加密函数详解
2016/11/20 PHP
详解PHP文件的自动加载(autoloading)
2018/02/04 PHP
php异常处理捕获错误整理
2019/09/23 PHP
JQuery AJAX实现目录浏览与编辑的代码
2008/10/21 Javascript
颜色选择器 Color Picker,IE,Firefox,Opera,Safar
2010/11/25 Javascript
JavaScript生成SQL查询表单的方法
2015/08/13 Javascript
jquery衣服颜色选取插件效果代码分享
2015/08/28 Javascript
jQuery Validate插件实现表单强大的验证功能
2015/12/18 Javascript
原生javascript实现addClass,removeClass,hasClass函数
2016/02/25 Javascript
Kindeditor在线文本编辑器如何过滤HTML
2016/04/14 Javascript
jQuery通过ajax快速批量提交表单数据
2016/10/25 Javascript
selenium 与 chrome 进行qq登录并发邮件操作实例详解
2017/04/06 Javascript
微信小程序getPhoneNumber获取用户手机号
2017/09/29 Javascript
10个最受欢迎的 JavaScript框架(推荐)
2019/04/24 Javascript
node 版本切换的实现
2020/02/02 Javascript
vue+springboot图片上传和显示的示例代码
2020/02/14 Javascript
Python脚本文件打包成可执行文件的方法
2015/06/02 Python
Python3 实现文件批量重命名示例代码
2019/06/03 Python
Djang的model创建的字段和参数详解
2019/07/27 Python
python错误调试及单元文档测试过程解析
2019/12/19 Python
Python定义一个函数的方法
2020/06/15 Python
python实现计算图形面积
2021/02/22 Python
学院领导推荐信
2013/10/30 职场文书
《守株待兔》教学反思
2014/03/01 职场文书
《世界多美呀》教学反思
2014/03/02 职场文书
院领导写的就业推荐信
2014/03/09 职场文书
会议欢迎标语
2014/06/30 职场文书
大学团日活动新闻稿
2014/09/10 职场文书
计算机考试作弊检讨书1000字
2015/01/01 职场文书
结婚保证书
2015/01/16 职场文书
工作违纪检讨书范文
2015/01/26 职场文书
海上钢琴师观后感
2015/06/03 职场文书
Vue提供的三种调试方式你知道吗
2022/01/18 Vue.js