Несколько способов реализации 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

На веб-странице будет размещаться два элемента управления.

Бесплатный курс «Full-Stack практика»

Изучите курс и создайте веб-приложение с нуля на JavaScript, NodeJS, ExpressJS

Получить курс

Текстовое поле, в котором пользователь будет вводить текст для поиска.

Кнопка, которая при нажатии будет извлекать изображения из Flickr API.

Flickr Public API

Flickr Public API возвращает JSONP, а не JSON, и его формат:

Дополнительную информацию вы можете найти по этой ссылке.

JSONP содержит функцию оболочки jsonFlickrFeed.

Вы можете изменить имя функции-оболочки, передав jsoncallback в URL-адрес API. Например, если я передаю abc для jsoncallback в URL-адресе API, URL-адрес будет выглядеть следующим образом: https://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=abc&format=json

И, таким образом, функция-оболочка будет выглядеть следующим образом:

HTML-код страницы

Переходим к части реализации. Сначала посмотрите HTML-код, который содержит только текстовое поле, кнопку и div. Вы можете поместить теги search в textbox, и когда пользователь нажимает кнопку, изображения, которые извлекаются из API, отображаются в div.

Бесплатный курс «Full-Stack практика»

Изучите курс и создайте веб-приложение с нуля на JavaScript, NodeJS, ExpressJS

Получить курс

1. Реализация Flickr Public API с помощью jQuery AJAX-метода

Я буду реализовывать этот API с помощью метода jQuery AJAX. Мне нужно использовать jsonp для dataType и jsonFlickrFeed для свойств jsonpCallback. Таким образом, код метода jQuery AJAX будет следующим:

Пояснение: В функции успешного обратного вызова я использовал метод .each() для прокрутки содержимого и отображения первых 5 изображений. Также посмотрите, как я добавил значение текстового поля в поле url.

Демо-версия | Скачать код

2. Реализация Flickr Public API с помощью метода jQuery getJSON

Теперь для реализации Flickr Public API я буду использовать метод jQuery getJSON. Обратите внимание, что я передаю jsoncallback в URL-адрес для изменения функции оболочки JSONP. Также посмотрите, как значения полей tags, tagmode, format передаются в качестве второго параметра.

3. Реализация Flickr Public API с помощью метода JavaScript

Мы также можем реализовать API Flickr с помощью JavaScript. Поскольку этот API возвращает jsonp, я создам тэг script и присвою его свойство src URL-адресу API. Затем я добавлю этот скрипт в заголовок страницы.

И в конце мы создаем функцию JavaScript с именем jsonFlickrFeed, которая будет вызываться автоматически, когда jsonp будет загружен полностью на странице.

Чтобы отобразить изображения, вы можете обработать их с помощью метода JavaScript .forEach() и вывести внутри div. HTML-код страницы

JavaScript-код

Заключение

В целом, я думаю, что jQuery — отличная библиотека для реализации API всех видов, и я сам использую ее в своих кодах. Надеюсь, я понятно пояснил все коды. Если вам действительно понравилась эта статья, пожалуйста, сделайте хлопок, это наверняка порадует меня и заставит создавать и публиковать новые статьи на CodeBurst каждую неделю.

Автор: Yogi

Источник: https://codeburst.io/

Редакция: Команда webformyself.

Бесплатный курс «Full-Stack практика»

Изучите курс и создайте веб-приложение с нуля на JavaScript, NodeJS, ExpressJS

Получить курс

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

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

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

Метки:

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

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

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

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

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

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

Я не робот.

Spam Protection by WP-SpamFree