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 相关文章推荐
JsEasy简介 JsEasy是什么?与下载
Mar 07 Javascript
isArray()函数(JavaScript中对象类型判断的几种方法)
Nov 26 Javascript
使用JavaScript获取地址栏参数的方法
Dec 19 Javascript
jQuery使用$.get()方法从服务器文件载入数据实例
Mar 25 Javascript
通过XMLHttpRequest和jQuery实现ajax的几种方式
Aug 28 Javascript
js实现正则匹配中文标点符号的方法
Dec 23 Javascript
bootstrap daterangepicker双日历时间段选择控件详解
Jun 15 Javascript
node中的cookie的具体使用
Sep 13 Javascript
vue使用video.js进行视频播放功能
Jul 18 Javascript
layui监听下拉选框选中值变化的方法(包含监听普通下拉选框)
Sep 24 Javascript
JavaScript实现更换背景图片
Oct 18 Javascript
Vue组件基础用法详解
Feb 05 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
咖啡知识 咖啡养豆要养多久 排气又是什么
2021/03/06 新手入门
解析mysql 表中的碎片产生原因以及清理
2013/06/22 PHP
PHP中的排序函数sort、asort、rsort、krsort、ksort区别分析
2014/08/18 PHP
PHP直接修改表内容DataGrid功能实现代码
2015/09/24 PHP
thinkPHP5实现的查询数据库并返回json数据实例
2017/10/23 PHP
原型方法的不同写法居然会影响调试的解决方法
2007/03/08 Javascript
JQuery入门——事件切换之toggle()方法应用介绍
2013/02/05 Javascript
基于jquery的禁用右键、文本选择功能、复制按键的实现代码
2013/08/27 Javascript
BootStrap glyphicon图标无法显示的解决方法
2016/09/06 Javascript
基于jquery日历价格、库存等设置插件
2020/07/05 jQuery
Angular 2使用路由自定义弹出组件toast操作示例
2019/05/10 Javascript
微信小程序动画组件使用解析,类似vue,且更强大
2019/08/01 Javascript
vue 返回上一页,页面样式错乱的解决
2019/11/14 Javascript
如何用JS模拟实现数组的map方法
2020/07/30 Javascript
微信小程序实现锚点跳转
2020/11/23 Javascript
vue3.0中使用element的完整步骤
2021/03/04 Vue.js
简单介绍Ruby中的CGI编程
2015/04/10 Python
Python教程之全局变量用法
2016/06/27 Python
python2.7实现爬虫网页数据
2018/05/25 Python
对python:print打印时加u的含义详解
2018/12/15 Python
python多进程下实现日志记录按时间分割
2019/07/22 Python
Python简易版停车管理系统
2019/08/12 Python
python实现人机五子棋
2020/03/25 Python
全面介绍python中很常用的单元测试框架unitest
2020/12/14 Python
HTML5 drag和drop具体使用详解
2021/01/18 HTML / CSS
Java语言程序设计测试题判断题部分
2013/01/06 面试题
生物制药专业求职信
2014/03/11 职场文书
工伤赔偿协议书范本
2014/04/15 职场文书
清明节演讲稿
2014/05/27 职场文书
新闻发布会策划方案
2014/06/12 职场文书
教师暑期培训感言
2014/08/15 职场文书
党员自我剖析材料范文
2014/10/06 职场文书
三八妇女节标语
2014/10/09 职场文书
纪委书记群众路线整改措施思想汇报
2014/10/09 职场文书
暑期社会实践证明书
2014/11/17 职场文书
一文弄懂MySQL索引创建原则
2022/02/28 MySQL