尝试调整$ .getJSON Flickr示例:
$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?",
function(data){
$.each(data.items, function(i,item){
$("<img/>").attr("src", item.media.m).appendTo("#images");
if ( i == 3 ) return false;
});
});
从flickr.photos.search REST API方法中读取,但此调用的JSON响应不同。
这是我到目前为止所做的:
var url = "http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=YOURAPIKEYHERE&tags=yokota+air+base&safe_search=1&per_page=20";
var src;
$.getJSON(url + "&format=json&jsoncallback=?", function(data){
$.each(data.photos, function(i,item){
src = "http://farm"+ item.photo.farm +".static.flickr.com/"+ item.photo.server +"/"+ item.photo.id +"_"+ item.photo.secret +"_m.jpg";
$("<img/>").attr("src", src).appendTo("#images");
if ( i == 3 ) return false;
});
});
我想我没有正确构建图像src。根据JSON响应的内容,找不到有关如何构建映像src的任何文档。 如何解析flickr.photos.search REST API调用?
答案 0 :(得分:25)
没关系,我明白了。对于那些感兴趣的人,它被解析如下:
var url = "http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=YOURAPIKEYHERE&tags=yokota+air+base&safe_search=1&per_page=20";
var src;
$.getJSON(url + "&format=json&jsoncallback=?", function(data){
$.each(data.photos.photo, function(i,item){
src = "http://farm"+ item.farm +".static.flickr.com/"+ item.server +"/"+ item.id +"_"+ item.secret +"_m.jpg";
$("<img/>").attr("src", src).appendTo("#images");
if ( i == 3 ) return false;
});
});
请注意.photo已移至$ .each方法签名。
答案 1 :(得分:5)
通过选择'url_m'extras参数和per_page参数......
可以简化这一过程extras=url_m&per_page=4
然后你需要的只是循环内...
$("<img/>").attr("src", item.url_m).appendTo("#images");
答案 2 :(得分:3)
要访问Flickr API,您必须使用https: //
:
var url = "https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=YOURAPIKEYHERE&tags=yokota+air+base&safe_search=1&per_page=20";
var src;
答案 3 :(得分:2)
jQuery.getJSON()的jQuery API文档在这里有一个有用的示例:http://api.jquery.com/jquery.getjson/
文档提供了一个完整的文件,作为如何解析API调用的示例;它从Flickr JSONP API加载了Mount Rainier的四张最新图片。我将此处的文件重新打印为可能有用的其他上下文,特别是对于那些刚接触API的用户而言。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery.getJSON demo</title>
<style>
img {
height: 100px;
float: left;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<div id="images"></div>
<script>
(function() {
var flickerAPI = "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?";
$.getJSON( flickerAPI, {
tags: "mount rainier",
tagmode: "any",
format: "json"
})
.done(function( data ) {
$.each( data.items, function( i, item ) {
$( "<img>" ).attr( "src", item.media.m ).appendTo( "#images" );
if ( i === 3 ) {
return false;
}
});
});
})();
</script>
</body>
</html>