Ajax запрос на основе jQuery и PHP.

В прошлой статьей про получение фото с Flickr мы использовали API, предоставленное самим сервисом. В этой статье мы опишем каким образом можно организовать асинхронные запросы к серверу с получением данных на том же примере Flickr.

jQuery и Ajax.

Одна из самых мощных сторонjQuery это наличие удобного Ajax-функционала. Он позволяет гибко настраивать ваш асинхронный запрос под ваши нужды.
А именно:

  • настройка типа ответа от сервера (XML, JSON, HTML, script или текст)
  • настройка действий перед отправкой запроса (валидация, настройка изображения прелоадера, и т.д.)
  • настройка поведения в случае, когда запрос успешно прошел
  • настройка URL для запроса (в нашем примере это будет PHP скрипт), время тайм-аута и многое другое. Для полной информации посетите страницу документации  jQuery.

Идея Ajax-запроса к Flickr для получения фото.

Мы создадим PHP скрипт который будет искать фото по запросу на сервере Flickr, используя API, как это было в прошлой статье. Но это серверное действо. Что касается клиентской стороны мы создадим простую форму с текстовым полем и кнопкой поиска. Также напишем небольшой фрагмент кода Ajax jQuery, который будет управлять нашим запросом внутри формы.

HTML форма поиска

Итак, для начала напишем простую разметку для формы поиска и отведем место для вывода результатов. Для результатов отведем DIV с ID равным “result”, куда будет складываться результат запросы. Для написания jQuery Ajax кода, нам необходимо подключить библиотеку jQuery. Взять свежие версии jQuery можно тут.

 

jQuery Ajax код.

Мы будем использовать событие клика по кнопке поиска формы.  Но перед тем как отправить запрос к скрипту getFlickr.php, мы должны проверить ряд условий. В частности, если поле запроса формы пустое, нужно сгенерировать ошибку. Затем мы отправим запрос к скрипту, и в случае успешного ответа мы выведем результаты в приготовленный DIV.

 

PHP код для Flickr API.

Сейчас мы напишем код на PHP, который базируется на классе, написанном в прошлый раз. Если вы не читали о API Flickr, обратитесь к предыдущей статье.

 

В этом скрипте мы получаем GET значения из HTML формы, про которую мы уже говорили. Если GET пуст, то мы остановим скрипт, но ошибку выводить не будем, так как об этом мы уже позаботились в клиентской части в jQuery коде. Если же все в порядке, то происходит запрос к Flickr в точности как в предыдущей статье, получаем html-разметку в цикле и выводим ее. Далее jQuery код отработает на клиентской стороне и выведет эту разметку все в тот же DIV с ID “result”. Этот скрипт нужно сохранить с именем getFlickr.php, чтобы все части были соединены воедино.

При желании можно использовать широкие возможности jQuery, если вы хотите красиво обыграть вывод результатов (эффекты и т.д.).

Источник: www.web-development-blog.com.

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

Ваш 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="">