От автора: 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, и его формат:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 |
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-адрес будет выглядеть следующим образом: //api.flickr.com/services/feeds/photos_public.gne?jsoncallback=abc&format=json
И, таким образом, функция-оболочка будет выглядеть следующим образом:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
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.
1 2 3 |
<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 будет следующим:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
var flickerAPI = "//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 передаются в качестве второго параметра.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
var flickerAPI = "//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-код страницы
1 2 3 |
<input id="search" type="text" placeholder="search text" /> <button id="submit" onclick="JavaScriptFetch()">Submit</button> <div id="outputDiv"></div> |
JavaScript-код
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
function JavaScriptFetch() { var script = document.createElement('script'); script.src = "//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
Источник: //codeburst.io/
Редакция: Команда webformyself.