Решил написать серию уроков по использованию ajax и php. Постараюсь на реальных примерах описать как получать данные от сервера без перезагрузки страницы, другими словами асинхронно. Начнем мы с малого, разберем пару простых примеров, а в будущем возьмём более сложные с использованием фреймворков. Этот урок будет посвящен базовым понятиям и небольшой пример работы.
В этом простом примере мы будем отправлять данные с формы, а в ответ будем получать какие-то данные на основе этой строки, пусть это будет md5
хеш.
Напишем простую html страницу:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form id="myForm"> <input type="text" name="string"> <input type="submit"> </form> <div id="result"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script> </body> </html>
Самая обычная страница с формой, с помощью которой мы будем отправлять ajax
запрос в наш обработчик, который лежит в этой же директории. Под формой находится блок в который мы будем выводить результат и ниже у нас подключена библиотека jquery
, пока ничего сложного.
Обработчик у нас тоже будет довольно простым:
<?php // Устанавливаем header для ответа в json header("Content-Type: application/json"); // Значения по умолчанию $data = [ 'status' => 'fail', 'result' => null ]; // Стандартный ответ http_response_code(400); // Проверяем наш POST запрос if (!empty($_POST) && isset($_POST['string'])) { $data = [ 'status' => 'ok', 'result' => md5($_POST['string']) ]; // Если всё хорошо, ставим нужный нам статус код 200 'OK' http_response_code(200); } // Выводим результат echo json_encode($data);
Я дополнил код комментариями чтобы долго не описывать весь процесс, думаю по коду будет понятно, в кратце:
- Задаём заголовок
application/json
- Создаём массив со стандартным ответом
- Задаём заголовок по умолчанию (400 Bad Request)
- Проверяем наш суперглобальный массив на наличие нужного индекса
- Устанавливаем ответ
- Устанавливаем код ответа 200 ОК
- Выводим результат, да, именно так, через
echo
Обработчик готов, теперь нужно написать функцию, которая будет отлавливать событие отправки формы, отправлять запрос на сервер и выводить результат на страницу. Для этого нам нужно немного изменить нашу html
страницу. В самом низу под тегами script
где мы подключали jqeury пишем:
<script> $(document).ready(function () { $('#myForm').submit(function(e){ e.preventDefault(); var formData = new FormData(this); $.ajax({ type: 'POST', url: 'handler.php', data: formData, processData: false, contentType: false, success: function (response) { $('#result').text("Результат: " + response.result); }, error: function(response) { $('#result').text("Ошибка при обработке запроса"); } }); }); }); </script>
На этом программирование закончено, теперь при отправке формы, мы получим результат работы php скрипта. Рассмотрим более подробно работу с ajax. Как мы знаем, в классической схеме взаимодействия браузера с сервером, браузер отправляет запрос, сервер отвечает отдавая новую страницу, браузер её загружает. Другими словами, каждый раз у нас происходит перезагрузка страницы страницы, ajax же позволяет выполнять запросы к серверу асинхронно, это значит что мы можем получить данные от сервера не перезагружая страницу. Приведу пример на основе кода выше:
- Пользователь совершает какое-то действие (в нашем случае отправка формы)
- javascript обрабатывает событие и выполняет ajax запрос к серверу
- Сервер обрабатывает запрос и возвращает ответ
- Полученный ответ javascript обрабатывает и выводит на странице
Принцип работы довольно простой, далее мы будем разбирать более сложные примеры.