flickr.photos.searchを照会し、返されたJSONを使用してimgタグのsrc値となるURLを作成します。次に、jQuery.getJSON()を使用してそれを行う方法の例を示します。
まず、アプリを登録してAPIキーhereを取得する必要があります。
APIキーを取得したら、APIを検索して1つの結果を返し、その結果をimgタグに表示する方法の基本的なデモンストレーションがあります。物事をシンプルに保つために、エラー処理は唯一のJSONを得ることができません。デモはjQueryのを必要とすることに注意してください。
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Basic Flickr Image Search</title>
</head>
<body>
<label for="query">Search Flickr:</label>
<input id="query" type="text" placeholder="Dog">
<input id="submit" type="submit">
<div id="container"></div>
<script src="jquery.min.js"></script>
<script src="app.js"></script>
</body>
</html>
のJavaScript(app.js)
var query = $('#query');
var submit = $('#submit');
var container = $('#container');
submit.click(function() {
// Clear the previously displayed pic (if any)
container.empty();
// build URL for the Flickr API request
var requestString = "https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=";
// Replace XXXXXXXX with your API Key
requestString += "XXXXXXXX";
requestString += "&text=";
requestString += encodeURIComponent(query.val());
requestString += "&sort=relevance&media=photos&content_type=1&format=json&nojsoncallback=1&page=1&per_page=1";
// make API request and receive a JSON as a response
$.getJSON(requestString)
.done(function(json) {
// build URL based on returned JSON
// See this site for JSON format info: https://www.flickr.com/services/api/flickr.photos.search.html
var URL = "https://farm" + json.photos.photo[0].farm + ".staticflickr.com/" + json.photos.photo[0].server;
URL += "/" + json.photos.photo[0].id + "_" + json.photos.photo[0].secret + ".jpg";
// build the img tag
var imgTag = '<img id="pic" src="' + URL + '">';
// display the img tag
container.append(imgTag);
})
.fail(function(jqxhr) {
alert("Sorry, there was an error getting pictures from Flickr.");
console.log("Error getting pictures from Flickr");
//write the returned object to console
console.log(jqxhr);
});
});
ありがとう!私は現在、jqueryを学んでいるので私には素晴らしい答えです。そのコードに入り、変更を加えることができます...他の答えも有効だと思いますが、私は今のところPHPを知らないのです。素晴らしい! – youpielove