用JQuery解析获取JSON数据

来源：互联网发布：临沂淘宝拍照编辑：程序博客网时间：2024/06/07 06:00

$(function(){
02        var url="http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?"
03         //使用getJSON方法取得JSON数据
04        $.getJSON(　　　　
05        url,
06        //处理数据 data指向的是返回来的JSON数据
07        function(data){
08                //生成标题和标题连接
09                var tit="<a href='"+ data.link +"'>"+data.title +"<\/a>";
10                $("h1").html(tit); 　　　　
11                //出现在指定位置H1 内
12                $("#ginfo").find("p").eq(0).html(data.modified);
13                $("#ginfo").find("p").eq(1).html(data.generator);
14                var lis=""; 　　　
15                //li 列表项目
16                $(data.items).each(function(i,ite){ 　　　　
17                    //遍历JSON数据得到所需形式
18                    lis+="<li>";
19                    lis+="<a href='"+ ite.link +"'><img src='"+ite.media.m +"' title='"+ ite.title +"'><\/><\/a>";
20                    lis+="<div>";
21                    lis+=ite.description;               
22                    lis+="<\/div><\/li>";               
23                    })
24                $("ul").html(lis);   　　　
25                //将遍历出来的数据呈现在所需位置
26                $("li").hover(function(){$(this).addClass("hov")}, function(){$(this).removeClass("hov")});   
27        }
28        )
29  })       

HTML：

1<div class="main">
2    <div class="ginfo" id="ginfo">   
3        <h1></h1>
4        <p></p>
5        <p></p>
6   </div>
7   <ul>      
8   </ul>
9</div> 

0 0