От автора: Flickr — это крупнейший в мире сайт для размещения изображений и видео, который содержит около 7 миллиардов изображений. Он также имеет собственные API, которые разработчики могут использовать в своих приложениях.
В этом руководстве я расскажу о некоторых крутых способах поиска и получения изображений из Flickr API. Затем вы можете вывести эти фотографии на своей веб-странице. Для использования этих API я буду использовать jQuery и JavaScript.
Обратите внимание, что я буду использовать Flickr Public API, поэтому мне не нужно аутентифицировать запрос с помощью ключей API. Ознакомиться с документацией Flickr Public API вы можете по этой ссылке.
Веб-страница для поиска изображений с использованием API Flickr
На веб-странице будет размещаться два элемента управления.
Текстовое поле, в котором пользователь будет вводить текст для поиска.
Кнопка, которая при нажатии будет извлекать изображения из Flickr API.
Flickr Public API
Flickr Public API возвращает JSONP, а не JSON, и его формат:
jsonFlickrFeed({ "title": "Uploads from everyone", "link": "https:\/\/www.flickr.com\/photos\/", "description": "", "modified": "2017-12-31T14:44:56Z", "generator": "https:\/\/www.flickr.com", "items": [ { "title": "DSC_0364.jpg", "link": "https:\/\/www.flickr.com\/photos\/carinafneves\/24542361147\/", "media": {"m":"https:\/\/farm5.staticflickr.com\/4735\/24542361147_dba818f18d_m.jpg"}, "date_taken": "2017-12-22T21:27:58-08:00", "description": " <p><a href=\"https:\/\/www.flickr.com\/people\/carinafneves\/\">ninafneves<\/a> posted a photo:<\/p> <p><a href=\"https:\/\/www.flickr.com\/photos\/carinafneves\/24542361147\/\" title=\"DSC_0364.jpg\"><img src=\"https:\/\/farm5.staticflickr.com\/4735\/24542361147_dba818f18d_m.jpg\" width=\"160\" height=\"240\" alt=\"DSC_0364.jpg\" \/><\/a><\/p> ", "published": "2017-12-31T14:44:56Z", "author": "nobody@flickr.com (\"ninafneves\")", "author_id": "114340513@N07", "tags": "" }, { "title": "636503534996139526", "link": "https:\/\/www.flickr.com\/photos\/161579948@N08\/24542362237\/", "media": {"m":"https:\/\/farm5.staticflickr.com\/4633\/24542362237_204b3ca4e6_m.jpg"}, "date_taken": "2017-12-31T06:45:02-08:00", "description": " <p><a href=\"https:\/\/www.flickr.com\/people\/161579948@N08\/\">truyentranhth<\/a> posted a photo:<\/p> <p><a href=\"https:\/\/www.flickr.com\/photos\/161579948@N08\/24542362237\/\" title=\"636503534996139526\"><img src=\"https:\/\/farm5.staticflickr.com\/4633\/24542362237_204b3ca4e6_m.jpg\" width=\"163\" height=\"240\" alt=\"636503534996139526\" \/><\/a><\/p> ", "published": "2017-12-31T14:45:02Z", "author": "nobody@flickr.com (\"truyentranhth\")", "author_id": "161579948@N08", "tags": "" }, { "title": "Hello 2018", "link": "https:\/\/www.flickr.com\/photos\/wolfcat_aus\/25537966958\/", "media": {"m":"https:\/\/farm5.staticflickr.com\/4645\/25537966958_108ab49ec6_m.jpg"}, "date_taken": "2018-01-01T00:03:22-08:00", "description": " <p><a href=\"https:\/\/www.flickr.com\/people\/wolfcat_aus\/\">wolfcat_aus<\/a> posted a photo:<\/p> <p><a href=\"https:\/\/www.flickr.com\/photos\/wolfcat_aus\/25537966958\/\" title=\"Hello 2018\"><img src=\"https:\/\/farm5.staticflickr.com\/4645\/25537966958_108ab49ec6_m.jpg\" width=\"240\" height=\"140\" alt=\"Hello 2018\" \/><\/a><\/p> ", "published": "2017-12-31T14:44:46Z", "author": "nobody@flickr.com (\"wolfcat_aus\")", "author_id": "7519521@N06", "tags": "nikon d7100 nikond7100sigma 150500mm nikond7100 sigma1835mmf18 sigma art lens f18 sigma1835mmf18dchsmartlens nye newyearseve melbourne australia 2018" }, ...... ] })
Дополнительную информацию вы можете найти по этой ссылке.
JSONP содержит функцию оболочки jsonFlickrFeed.
Вы можете изменить имя функции-оболочки, передав jsoncallback в URL-адрес API. Например, если я передаю abc для jsoncallback в URL-адресе API, URL-адрес будет выглядеть следующим образом: https://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=abc&format=json
И, таким образом, функция-оболочка будет выглядеть следующим образом:
abc({ "title": "Uploads from everyone", "link": "https:\/\/www.flickr.com\/photos\/", "description": "", "modified": "2017-12-31T14:44:56Z", "generator": "https:\/\/www.flickr.com", "items": [ { "title": "DSC_0364.jpg", "link": "https:\/\/www.flickr.com\/photos\/carinafneves\/24542361147\/", "media": {"m":"https:\/\/farm5.staticflickr.com\/4735\/24542361147_dba818f18d_m.jpg"}, "date_taken": "2017-12-22T21:27:58-08:00", "description": " <p><a href=\"https:\/\/www.flickr.com\/people\/carinafneves\/\">ninafneves<\/a> posted a photo:<\/p> <p><a href=\"https:\/\/www.flickr.com\/photos\/carinafneves\/24542361147\/\" title=\"DSC_0364.jpg\"><img src=\"https:\/\/farm5.staticflickr.com\/4735\/24542361147_dba818f18d_m.jpg\" width=\"160\" height=\"240\" alt=\"DSC_0364.jpg\" \/><\/a><\/p> ", "published": "2017-12-31T14:44:56Z", "author": "nobody@flickr.com (\"ninafneves\")", "author_id": "114340513@N07", "tags": "" }, ...... ] })
HTML-код страницы
Переходим к части реализации. Сначала посмотрите HTML-код, который содержит только текстовое поле, кнопку и div. Вы можете поместить теги search в textbox, и когда пользователь нажимает кнопку, изображения, которые извлекаются из API, отображаются в div.
<input id="search" type="text" placeholder="search text" /> <button id="submit">Submit</button> <div id="outputDiv"></div>
1. Реализация Flickr Public API с помощью jQuery AJAX-метода
Я буду реализовывать этот API с помощью метода jQuery AJAX. Мне нужно использовать jsonp для dataType и jsonFlickrFeed для свойств jsonpCallback. Таким образом, код метода jQuery AJAX будет следующим:
var flickerAPI = "https://api.flickr.com/services/feeds/photos_public.gne?format=json&tags=" + $("#search").val(); $.ajax({ url: flickerAPI, dataType: "jsonp", // jsonp jsonpCallback: 'jsonFlickrFeed', // add this property success: function (result, status, xhr) { $.each(result.items, function (i, item) { $("<img>").attr("src", item.media.m).appendTo("#outputDiv"); if (i === 5) { return false; } }); }, error: function (xhr, status, error) { console.log(xhr) $("#outputDiv").html("Result: " + status + " " + error + " " + xhr.status + " " + xhr.statusText) } });
Пояснение: В функции успешного обратного вызова я использовал метод .each() для прокрутки содержимого и отображения первых 5 изображений. Также посмотрите, как я добавил значение текстового поля в поле url.
2. Реализация Flickr Public API с помощью метода jQuery getJSON
Теперь для реализации Flickr Public API я буду использовать метод jQuery getJSON. Обратите внимание, что я передаю jsoncallback в URL-адрес для изменения функции оболочки JSONP. Также посмотрите, как значения полей tags, tagmode, format передаются в качестве второго параметра.
var flickerAPI = "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?"; $.getJSON(flickerAPI, { tags: $("#search").val(), tagmode: "any", format: "json" }).done(function (result, status, xhr) { $.each(result.items, function (i, item) { $("<img>").attr("src", item.media.m).appendTo("#outputDiv"); if (i === 5) { return false; } }); }).fail(function (xhr, status, error) { alert("Result: " + status + " " + error + " " + xhr.status + " " + xhr.statusText) });
3. Реализация Flickr Public API с помощью метода JavaScript
Мы также можем реализовать API Flickr с помощью JavaScript. Поскольку этот API возвращает jsonp, я создам тэг script и присвою его свойство src URL-адресу API. Затем я добавлю этот скрипт в заголовок страницы.
И в конце мы создаем функцию JavaScript с именем jsonFlickrFeed, которая будет вызываться автоматически, когда jsonp будет загружен полностью на странице.
Чтобы отобразить изображения, вы можете обработать их с помощью метода JavaScript .forEach() и вывести внутри div. HTML-код страницы
<input id="search" type="text" placeholder="search text" /> <button id="submit" onclick="JavaScriptFetch()">Submit</button> <div id="outputDiv"></div>
JavaScript-код
function JavaScriptFetch() { var script = document.createElement('script'); script.src = "https://api.flickr.com/services/feeds/photos_public.gne?format=json&tags=" + document.getElementById("search").value;; document.querySelector('head').appendChild(script); } function jsonFlickrFeed(data) { var image = ""; data.items.forEach(function (element) { image += "<img src=\"" + element.media.m + "\"/>"; }); document.getElementById("outputDiv").innerHTML = image; }
Заключение
В целом, я думаю, что jQuery — отличная библиотека для реализации API всех видов, и я сам использую ее в своих кодах. Надеюсь, я понятно пояснил все коды. Если вам действительно понравилась эта статья, пожалуйста, сделайте хлопок, это наверняка порадует меня и заставит создавать и публиковать новые статьи на CodeBurst каждую неделю.
Автор: Yogi
Источник: https://codeburst.io/
Редакция: Команда webformyself.
