Несколько способов реализации Flickr Public API на jQuery и JavaScript

Несколько способов реализации Flickr Public API на jQuery и JavaScript

От автора: 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.

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

Курс по jQuery: основы

Изучите jQuery с нуля до результата!

Смотреть курс

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree