i3geek.com
闫庚哲的个人博客

HTML5操作JSON(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)一个对象

数据格式:

{“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:黑三郎

方法二:

$(document).ready(function(){
		//跨域请求实例
	var url = 'json.html';
        $.getJSON(url,function(data){
        	data.Unid;//数据读取 .后面加json名称
                data.CustomerName;
            //后面的也都一样         
        });
		
	});

 

2)对象数组

数据格式:

[{“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) {
        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对。

方法二:

$(document).ready(function(){
		//跨域请求实例
	var url = 'json.html';
        $.getJSON(url,function(data){
        	data[0].Unid;//数据读取 .后面加json名称
                data[0].CustomerName;
            //后面的也都一样         
        });
		
	});

 

赞(0)
未经允许不得转载:爱上极客 » HTML5操作JSON(Jquery getJSON方法分析)
分享到: 更多 (0)

评论 4

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #1

    正在学html5,这文章很有用啊

    黑皮甘蔗4年前 (2015-01-18)回复
    • 谢谢,欢迎多多交流!

      yan4年前 (2015-01-22)回复
  2. #2

    支持个,我正在学习html5呢。

    偏方网4年前 (2015-01-19)回复
    • 谢谢!共同学习!

      yan4年前 (2015-01-22)回复