Пример использования метода 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 с классом, позволяющим центрировать загруженное изображение:

<br />
<body><br />
 <form id=”testPost” class=”small-form”><br />
    <label>Выберите один из вариантов:</label><br />
    <p><label for=”type1″><input type=”radio” name=”typeImg” id=”type1″ value=”nature”>Природа</label><br />
        <label for=”type2″><input type=”radio” name=”typeImg” id=”type2″ value=”people”>Люди</label><br />
        <label for=”type3″><input type=”radio” name=”typeImg” id=”type3″ value=”animals”>Животные</label><br />
        <label for=”type4″><input type=”radio” name=”typeImg” id=”type4″ value=”objects”>Объекты</label></p><br />
    <div><button class=”btn btn-info”>Готово</button></div><br />
 </form><br />
 <div class=”loader” style=”display: none”><br />
    <div id=”loader-6″><br />
        <span></span><br />
        <span></span><br />
        <span></span><br />
        <span></span><br />
    </div><br />
 </div><br />
 <div class=”text-center img-block”><br />
   <!– здесь будет картинка или текст –><br />
 </div><br />
 <script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js”></script><br />
 <script src=”post-ajax.js”></script><br />
</body>

<body>

<label>Выберите один из вариантов:</label>

<p><label for=“type1”><input type=“radio” name=“typeImg” id=“type1” value=“nature”>Природа</label>

<label for=“type3”><input type=“radio” name=“typeImg” id=“type3” value=“animals”>Животные</label>

<label for=“type4”><input type=“radio” name=“typeImg” id=“type4” value=“objects”>Объекты</label></p>

<div><button class=“btn btn-info”>Готово</button></div>

</form>

</div>

<!— здесь будет картинка или текст —>

</div>

</body>

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

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

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

<br />
$(“#testPost”).submit(function(e) {<br />
    e.preventDefault();<br />
    $(‘.loader’).show();<br />
    $.post(“php/post-request.php”, {<br />
        typeImg: $(‘[name=”typeImg”]:checked’).val()<br />
    })<br />
    .done(function(result) {<br />
        $(‘.img-block’).html(result);<br />
        img = $(“.img-block img”);<br />
        if (img.length > 0) {<br />
            img.one(‘load’, function() {<br />
                console.log(‘img load’);<br />
                $(‘.loader’).hide();<br />
            });<br />
        } else $(‘.loader’).hide();<br />
    })<br />
    .fail(function() {<br />
        alert(‘Ошибка!’);<br />
    });<br />
});

$(“#testPost”).submit(function(e) {

e.preventDefault();

$(‘.loader’).show();

$.post(“php/post-request.php”, {

typeImg: $(‘[name=”typeImg”]:checked’).val()

})

.done(function(result) {

$(‘.img-block’).html(result);

img = $(“.img-block img”);

if (img.length > 0) {

img.one(‘load’, function() {

console.log(‘img load’);

$(‘.loader’).hide();

});

} else $(‘.loader’).hide();

})

.fail(function() {

alert(‘Ошибка!’);

});

Что интересного в этом коде? Во 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.

<br />
<?php<br />
//print_r($_POST); //имеет смысл вывести на начальном этапе создания php-файла, чтобы увидеть,<br />
//какие данные приходят. Затем удалить<br />
if(!isset($_POST[‘typeImg’])) die(‘Нет данных для отображения картинки’);<br />
$param = $_POST[‘typeImg’];<br />
$randomId = rand ( 0 , 4 ); //случайное число от 0 до 4<br />
//массив, содержащий id картинок с unspash.com<br />
$imgArr = array(<br />
    ‘nature’ => array(‘4rDCa5hBlCs’, ‘cssvEZacHvQ’, ‘GVnUVP8cs1o’, ‘lpjb_UMOyx8′,’01_igFr7hd4’),<br />
    ‘people’ => array(‘IBaVuZsJJTo’, ‘sibVwORYqs0’, ‘nPz8akkUmDI’, ’98Elr-LIvD8′,’tSlvoSZK77c’),<br />
    ‘animals’ => array(‘nKC772R_qog’, ‘A81818EFqGQ’, ‘I3C1sSXj1i8′, ’39SHYToxfiQ’, ‘_9a-3NO5KJE’),<br />
    ‘objects’=> array(‘qcqmS0JG58Q’, ‘Nv4QHkTVEaI’, ‘KD3YDXJd9T8’, ‘cdnhg0csyAM’, ‘_yVRLC75Ma8’),<br />
);</p>
<p>//Вывод тега изображения с нужным адресом и размером<br />
echo ‘<img src=”https://source.unsplash.com/’.$imgArr[$param][$randomId].’/500×300″ alt=”‘.$param.'”>’;

<?php

//print_r($_POST); //имеет смысл вывести на начальном этапе создания php-файла, чтобы увидеть,

//какие данные приходят. Затем удалить

if(!isset($_POST[‘typeImg’])) die(‘Нет данных для отображения картинки’);

$param = $_POST[‘typeImg’];

$randomId = rand ( 0 , 4 ); //случайное число от 0 до 4

//массив, содержащий id картинок с unspash.com

$imgArr = array(

‘nature’ => array(‘4rDCa5hBlCs’, ‘cssvEZacHvQ’, ‘GVnUVP8cs1o’, ‘lpjb_UMOyx8’,’01_igFr7hd4′),

‘people’ => array(‘IBaVuZsJJTo’, ‘sibVwORYqs0’, ‘nPz8akkUmDI’, ’98Elr-LIvD8′,‘tSlvoSZK77c’),

‘animals’ => array(‘nKC772R_qog’, ‘A81818EFqGQ’, ‘I3C1sSXj1i8’, ’39SHYToxfiQ’, ‘_9a-3NO5KJE’),

‘objects’=> array(‘qcqmS0JG58Q’, ‘Nv4QHkTVEaI’, ‘KD3YDXJd9T8’, ‘cdnhg0csyAM’, ‘_yVRLC75Ma8’),

);

//Вывод тега изображения с нужным адресом и размером

echo ‘<img src=”https://source.unsplash.com/’.$imgArr[$param][$randomId].‘/500×300″ alt=”‘.$param.‘”>’;

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

В заголовках запроса (Headers) мы видим передачу одного параметра typeImg. При переключении на вкладку ответа (Response) можно увидеть сформированный тег, а в Preview – и саму картинку.

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

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

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