本文介绍了一个使用jQuery $.getJSON()方法从Flickr API获取公开照片的示例。通过简单的HTML页面与JavaScript代码结合，实现了加载并展示带有特定标签的照片及作者信息。
1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2<html xmlns="http://www.w3.org/1999/xhtml">
3<head>
4<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5<title>$.getJSON()方法</title>
6<script src="jquery-1.2.6.min.js"></script>
7<script type="text/javascript">
8
$(function()
{
9
$("#send").click(function(){
10
$("#resTest").empty();
11 $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=car&tagmode=any&format=json&jsoncallback=?",function(data){
12 $.each(data.items,function(i,item){
13 $("<img class='para' />").attr("src",item.media.m).appendTo("#resTest");
14 var html='';
15 html += "<p>"+item.published+"</p>"+"<p>"+item.author+"</p>";
16 $("#resTest").append(html);
17 if( i==5){
18 return false;
19
}
20 });
21 })
22 });
23
})
24</script>
25<style type="text/css">
26img.para{ width:120px: height:90px; border:1px solid #ccc; padding:2px; margin:10px;}
27</style>
28</head>
29<body>
30<input type="button" id="send" value="加载"/>
31<div id="resTest""></div>
32</body>
33</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">2
<html xmlns="http://www.w3.org/1999/xhtml">3
<head>4
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />5
<title>$.getJSON()方法</title>6
<script src="jquery-1.2.6.min.js"></script>7
<script type="text/javascript">8
$(function(){9
$("#send").click(function(){10
$("#resTest").empty();11
$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=car&tagmode=any&format=json&jsoncallback=?",function(data){12
$.each(data.items,function(i,item){13
$("<img class='para' />").attr("src",item.media.m).appendTo("#resTest");14
var html='';15
html += "<p>"+item.published+"</p>"+"<p>"+item.author+"</p>";16
$("#resTest").append(html);17
if( i==5){18
return false;19
}20
});21
})22
});23
})24
</script>25
<style type="text/css">26
img.para{ width:120px: height:90px; border:1px solid #ccc; padding:2px; margin:10px;}27
</style>28
</head>29
<body>30
<input type="button" id="send" value="加载"/>31
<div id="resTest""></div>32
</body>33
</html>
扫一扫
852
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
