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 相关文章推荐
JQUBar 基于JQUERY的柱状图插件
Nov 23 Javascript
jquery创建并行对象或者合并对象的实现代码
Oct 10 Javascript
JavaScript字符串对象replace方法实例(用于字符串替换或正则替换)
Oct 16 Javascript
jQuery simplePage+AJAX plus分页插件用法实例
Feb 17 Javascript
AngularJS基础 ng-repeat 指令简单示例
Aug 03 Javascript
JS插件plupload.js实现多图上传并显示进度条
Nov 29 Javascript
jquery中有哪些api jQuery主要API
Nov 20 jQuery
JS实现对json对象排序并删除id相同项功能示例
Apr 18 Javascript
Javascript获取某个月的天数
May 30 Javascript
浅析java线程中断的办法
Jul 29 Javascript
js实现简单选项卡功能
Mar 23 Javascript
使用React代码动态生成栅格布局的方法
May 24 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
Javascript和Ajax中文乱码吐血版解决方案
2009/12/21 Javascript
jQuery getJSON 处理json数据的代码
2010/07/26 Javascript
JQuery选择器特辑 详细小结
2012/05/14 Javascript
Javascript基础教程之定义和调用函数
2015/01/18 Javascript
Jquery ajax请求导出Excel表格的实现代码
2016/06/08 Javascript
省市区三级联动jquery实现代码
2020/04/15 Javascript
如何清除IE10+ input X 文本框的叉叉和密码输入框的眼睛图标
2016/12/21 Javascript
javascript ASCII和Hex互转的实现方法
2016/12/27 Javascript
简单实现JS上传图片预览功能
2017/04/14 Javascript
JS实现的四级密码强度检测功能示例
2017/05/11 Javascript
浅谈vue实现数据监听的函数 Object.defineProperty
2017/06/08 Javascript
详解基于vue-router的动态权限控制实现方案
2017/09/28 Javascript
javascript匿名函数中的'return function()'作用
2018/10/15 Javascript
JS开发 富文本编辑器TinyMCE详解
2019/07/19 Javascript
vue如何搭建多页面多系统应用
2020/06/17 Javascript
js模拟实现百度搜索
2020/06/28 Javascript
[02:22:36]《加油!DOTA》总决赛
2014/09/19 DOTA
结合Python的SimpleHTTPServer源码来解析socket通信
2016/06/27 Python
python中requests库session对象的妙用详解
2017/10/30 Python
wxPython实现窗口用图片做背景
2018/04/25 Python
利用Python进行数据可视化常见的9种方法!超实用!
2018/07/11 Python
Django 实现购物车功能的示例代码
2018/10/08 Python
基于python实现FTP文件上传与下载操作(ftp&amp;sftp协议)
2020/04/01 Python
在keras中model.fit_generator()和model.fit()的区别说明
2020/06/17 Python
Python接收手机短信的代码整理
2020/08/02 Python
使用AJAX和Django获取数据的方法实例
2020/10/25 Python
Python3爬虫ChromeDriver的安装实例
2021/02/06 Python
HTML5之tabindex属性全面解析
2016/07/07 HTML / CSS
Spanx塑身衣官网:美国知名内衣品牌
2017/01/11 全球购物
哈萨克斯坦最大的时装、鞋子和配饰在线商店:Lamoda.kz
2019/11/19 全球购物
实习生自我鉴定范文
2013/12/05 职场文书
群众路线领导班子整改方案
2014/10/25 职场文书
幼儿园六一儿童节演讲稿
2015/03/19 职场文书
2015年七年级班主任工作总结
2015/05/21 职场文书
中国古代史学名著《战国策》概述
2019/08/09 职场文书
十个Python自动化常用操作,即拿即用
2021/05/10 Python