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 相关文章推荐
alert中断settimeout计时功能
Jul 26 Javascript
Jquery插件easyUi实现表单验证示例
Dec 15 Javascript
Bootstrap所支持的表单控件实例详解
May 16 Javascript
详解jQuery简单的表格应用
Dec 16 Javascript
AngularJS 防止页面闪烁的方法
Mar 09 Javascript
jQuery.form.js的使用详解
Jun 14 jQuery
jquery基于layui实现二级联动下拉选择(省份城市选择)
Jun 20 jQuery
Javascript获取某个月的天数
May 30 Javascript
vue实现的微信机器人聊天功能案例【附源码下载】
Feb 18 Javascript
详解VUE项目中安装和使用vant组件
Apr 28 Javascript
koa中间件核心(koa-compose)源码解读分析
Jun 15 Javascript
如何用vue实现网页截图你知道吗
Nov 17 Vue.js
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+javascript液晶时钟
2006/10/09 PHP
php的curl实现get和post的代码
2008/08/23 PHP
PHP图片验证码制作实现分享(全)
2012/05/10 PHP
解析PHP中如何将数组变量写入文件
2013/06/06 PHP
Thinkphp5.0 框架使用模型Model添加、更新、删除数据操作详解
2019/10/11 PHP
javascript 写类方式之四
2009/07/05 Javascript
点击文章内容处弹出页面代码
2009/10/01 Javascript
js null,undefined,字符串小结
2010/08/21 Javascript
Javascript Throttle &amp; Debounce应用介绍
2013/03/19 Javascript
使用Sticker.js实现贴纸效果
2015/01/28 Javascript
javascript事件冒泡和事件捕获详解
2015/05/26 Javascript
javascript实现数组中的内容随机输出
2015/08/11 Javascript
jQuery中的each()详细介绍(推荐)
2016/05/25 Javascript
Bootstrap精简教程中秋大放送
2016/09/15 Javascript
bootstrap与Jquery UI 按钮样式冲突的解决办法
2016/09/23 Javascript
Bootstrap table表格简单操作
2017/02/07 Javascript
bootstrap table支持高度百分比的实例代码
2018/02/28 Javascript
js实现圆形菜单选择器
2020/12/03 Javascript
python使用内存zipfile对象在内存中打包文件示例
2014/04/30 Python
Python实现的检测web服务器健康状况的小程序
2014/09/17 Python
python opencv读mp4视频的实例
2018/12/07 Python
Python判断有效的数独算法示例
2019/02/23 Python
Anaconda+spyder+pycharm的pytorch配置详解(GPU)
2020/10/18 Python
Charles & Colvard官网:美国莫桑石品牌
2019/06/05 全球购物
客服文员岗位职责
2013/11/29 职场文书
2014年情人节活动方案
2014/02/16 职场文书
高中微机老师自我鉴定
2014/02/16 职场文书
国窖1573广告词
2014/03/21 职场文书
工程质量承诺书范文
2014/03/27 职场文书
美术专业自荐信
2014/07/07 职场文书
银行反洗钱宣传活动总结
2015/05/08 职场文书
企业财务管理制度范本
2015/08/04 职场文书
基督教追悼会答谢词
2015/09/29 职场文书
2016年6月份红领巾广播稿
2015/12/21 职场文书
2016年先进教师个人事迹材料
2016/02/26 职场文书
Minikube搭建Kubernetes集群
2022/03/31 Servers