Вы здесь: Главная » JavaScript » AJAX » Пример использования метода jQuery $.post для AJAX-запросов

Пример использования метода jQuery $.post для AJAX-запросов

Отправлять AJAX-запросы стало уже привычным делом. Причем большая часть этих запросов, как правило, использует метод POST для передачи данных. Поэтому для упрощения кода в jQuery был выделен метод $.post для отправки данных на сервер. В этой статье мы рассмотрим пример использования AJAX-метода $.post для выбора изображения в определенной категории.

Вы можете также использовать универсальный метод $.ajax, но целью данной статьи является попытка познакомить вас с возможностями метода $.post. Практическая задача состоит в том, чтобы выдать пользователю  случайную картинку из 5 возможных,  распределенных по 4-м категориям.

Начнем сразу с демонстрации примера (открыть в новой вкладке):

Вам, как пользователю, нужно выбрать категорию и нажать на кнопку "Готово". После этого на сервер отправится AJAX-запрос методом $.post, и вы увидите случайную картинку с unsplash.com из выбранной категории.

Для тех, кто любит просто нажимать на кнопки, загрузка картинки не произойдет, т.к. вы не отметили ни одной из категорий. Вместо этого вы увидите текст "Нет данных для отображения картинки", а особо любопытные в Инструментах разработчика в Firefox могут найти запись "Нет параметров для этого запроса".

Запрос без параметров

Запрос без параметров

Теперь разберем, как данный пример работает. Начнем с html-разметки.

HTML-разметка примера

Поскольку какой-либо текст не является предметом данной статьи, то в html-файле мы разместим только форму, <div class="loader"> для предзагрузчика, который изначально спрятан (style="display: none") и пустой div с классом, позволяющим центрировать загруженное изображение:

Перед закрывающим тегом <body> подключаем библиотеку jQuery (используем версию 3.5.1) с Google CDN или с другого ресурса, или из локальной папки. Затем подключаем наш файл post-ajax.js, в котором запишем основной код.

AJAX-запрос методом $.post

В форме у нас есть несколько радио-кнопок, из которых только одна может быть выделена, или выбрана (":checked"). Кнопка с текстом "Готово" по умолчанию имеет type="submit", поэтому мы будем обрабатывать событие submit для всей нашей небольшой формы с id="testPost". Код примера:

Что интересного в этом коде? Во 2-й строке мы отменяем отправку формы методом e.preventDefault(), в котором параметр e связан с нашим событием и передается в виде параметра в функцию-обработчик события. Так что никуда форму мы отправлять явно не будем, тем более, что и атрибут action  у нашего тега <form> отсутствует. Зато мы укажем адрес (url) нашего php-файла в методе $.post в качестве первого параметра в кавычках. Путь "php/post-request.php" говорит о том, что php-файл, который выполнит всю работу на сервере, лежит в папке php в той же директории, что и наш html-файл.

Далее в фигурных скобках мы передаем единственный параметр typeImg, в который у нас попадет категория, выбранная пользователем.

Функция done() в нашем скрипте отвечает за удачное выполнение AJAX-запроса и отображает нам изображение, адрес которого мы получим из php-файла, в пустом контейнере <div class="text-center img-block">. До того, как использовать метод $.post, мы отобразим наш предзагрузчик, а скроется он только после того, как картинка с сервера unsplash.com будет загружена. За отслеживание загрузки в скрипте отвечает метод img.one('load', function() {... }).

Функция fail() выведет ошибку в том случае, если она произойдет.

Код PHP-файла

PHP-файд должен сформировать нам случайное число от 0 до 4 (индексы в массивах в PHP начинаются с 0) и выдать на основе этого числа и пришедшей в параметре $_POST['typeImg']  категории  id изображения из массива $imgArr.

В коде есть комментарии для каждой важной строки. Для того чтобы понять принцип формирования массива с категориями картинок, советую прочитать статью "Использование изображений Unsplash.com на страницах сайта". Мы будем использовать id конкретных изображений.

Заголовок post-запроса

Заголовок post-запроса

Ответ сервера

Ответ сервера

На самом деле для этого примера совсем необязательно было подтягивать AJAX-запрос и его обработку в PHP-файле - с этим вполне бы справился и один JavaScript/jQuery, но, если расширить задачу до случайного выбора файла изображения из определенной категории в базе данных, - здесь уже точно понадобится связка AJAX-PHP.

Автор: Админ

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

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