Verification: a143cc29221c9be0

Php and jquery ajax post

Получение и вывод JSON-данных

В качестве источника JSON-данных будем использовать сайт jsonplaceholder.typicode.com с данными users.

Директива x-dataуказывает на то, что это компонент Alpine. Мы сразу инициализируем переменную users, которая будет массивом/объектом полученных данных.

Если перейти по указанному адресу, то увидим обычные JSON-данные одного пользователя. Поэтому отображение результата будет происходить в SPAN с директивами x-text. В одном тэге это имя юзера, в другом его email.

Получение данных «вешаем» на click кнопки: прописываем получение данных через fetch(). Здесь происходит get-запрос по указанному URL и данные в формате JSON присваиваются нашей переменной users. В целом это достаточно типовой вариант работы с fetch().

Если данные представляют собой многомерный массив, то для его вывода нужно использовать директиву x-for.

Тут всё практически тоже самое, только по новому адресу получается не один элемент, а множество. Директива для вывода в цикле x-forв Alpine применяется только к тэгу TEMPLATE (как принято с web-компонентами).

Отправка произвольных данных по AJAX

Теперь рассмотрим вариант, если нужно сформировать произвольный Ajax-запрос без создания html-формы. Отправлять post-запрос мы будем уже на свой адрес, а ответ получать в виде текста/html.

Обработчик ajax-запроса представляет собой очень простую страницу. Если вы используете Albireo, то можете сделать такой файл:

Привет!';
 
pr($_POST); // вывод входящего POST

Адрес (slug) можно указать другой. Он указывается в fetch-запросе.

Теперь код примера:

Первое отличие — адрес fetch-запроса. Второе — дополнительные параметры. В данном случае это method, headersи body. Заголовок мы отправляем для того, чтобы в php-обработчике определить, что это именно Ajax-запрос.

Если нужен обычный POST, то этот заголовок можно не указывать и не отслеживать в обработчике.

Тело запроса формируем его из нового объекта FormData. Сейчас в основном именно так и делают вместо обработки данных. Поле _methodнужно для роутинга Albireo (описание и примеры есть в документации). То есть данные для отправки формируются динамически. При желании можно привязать те же поля ввода.

Поскольку ответ — это обычный текст с разметкой HTML, то используем директиву x-html. Если же использовать x-text, то ответ мы увидим в виде обычного текста.

Отправка формы через Ajax

Обычную форму можно отправить похожим образом.

sample1', { method: 'POST', headers: { 'X-Requested-With': 'XMLHttpRequest', }, body: new FormData($refs.form) }) .then(response => response.text()) .then(response => textData = response); return false; ">

Это самая обычная форма, где мы ловим событие submit. Обратите внимание, что функция возвращает false— это нужно для того, чтобы блокировать обычную отправку данных.

Данные мы формируем через FormData, как и в прошлый раз, только в качестве источника указываем текущую форму. Это $refs.form.

Переменная $refsв Alpine особая («магическая»), которая хранит DOM-элементы. В данном случае это form, который мы указали у самой формы в виде директивы x-ref.

С помощью x-refи $refsв Alpine реализуется получение любого элемента. Если бы мы делали этот пример на нативном JavaScript, то использовали бы getElementById()или querySelector(), чтобы получить доступ к данным формы.

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

Поскольку какой-либо текст не является предметом данной статьи, то в html-файле мы разместим только форму,

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

body>

form id="testPost" class="small-form">

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

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

        label for="type2">input type="radio" name="typeImg" id="type2" value="people">Люди/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 class="loader" style="display: none">

    div id="loader-6">

        span>/span>

        span>/span>

        span>/span>

        span>/span>

    /div>

/div>

div class="text-center img-block">

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

/div>

="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">

="post-ajax.js">

/body>

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

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

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

$("#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  у нашего тега

отсутствует. Зато мы укажем адрес (url) нашего php-файла в методе $.post в качестве первого параметра в кавычках. Путь "php/post-request.php" говорит о том, что php-файл, который выполнит всю работу на сервере, лежит в папке php в той же директории, что и наш html-файл.

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

Функция done() в нашем скрипте отвечает за удачное выполнение AJAX-запроса и отображает нам изображение, адрес которого мы получим из php-файла, в пустом контейнере

. До того, как использовать метод $.post, мы отобразим наш предзагрузчик, а скроется он только после того, как картинка с сервера unsplash.com будет загружена. За отслеживание загрузки в скрипте отвечает метод img.one('load', function() {... }).

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