根據搜索結果獲取Flickr圖像

Question

如何根據文件名顯示來自Flickr的某些圖像。 我想搜索圖片並只顯示符合我搜索結果的圖片。

老實說，這是我第一次使用Flickr，他們真的需要在那裏放些更多的例子。

任何想法從哪裏開始？

Answer 1

這裏有一個幫手方法，我扔在一起，讓你向flickr的API提出請求。這可能有助於查看flickr api documentation，這樣您就可以開始瞭解如何處理將要返回的數據。這應該在Chrome和Firefox中起作用，我還沒有在IE或Safari中測試過它。

/* 
* Make an XmlHttpRequest to api.flickr.com/services/rest/ with query parameters specified 
* in the options hash. Calls cb once the request completes with the results passed in. 
*/ 

var makeFlickrRequest = function(options, cb) { 
    var url, xhr, item, first; 

    url = "http://api.flickr.com/services/rest/"; 
    first = true; 

    for (item in options) { 
    if (options.hasOwnProperty(item)) { 
     url += (first ? "?" : "&") + item + "=" + options[item]; 
     first = false; 
    } 
    } 

    xhr = new XMLHttpRequest(); 
    xhr.onload = function() { cb(this.response); }; 
    xhr.open('get', url, true); 
    xhr.send(); 

}; 

用法：

var options = { 
    "api_key": "<your api key here>", 
    "method": "flickr.photos.search", // You can replace this with whatever method, 
            // flickr.photos.search fits your use case best, though. 
    "format": "json", 
    "nojsoncallback": "1", 
    "text": "<your search text here>" // This is where you'll put your "file name" 
} 

makeFlickrRequest(options, function(data) { alert(data) }); // Leaving the actual 
                  // implementation up to you! ;) 

如果您使用jQuery，這裏是一個jQuery版本：

var makeFlickrRequest = function(options, cb) { 
    var url, item, first; 

    url = "http://api.flickr.com/services/rest/"; 
    first = true; 
    $.each(options, function(key, value) { 
    url += (first ? "?" : "&") + key + "=" + value; 
    first = false; 
    }); 

    $.get(url, function(data) { cb(data); }); 

}; 

此方法具有相同的使用作爲非jQuery的版本。