Решил написать серию уроков по использованию 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 обрабатывает и выводит на странице
Принцип работы довольно простой, далее мы будем разбирать более сложные примеры.
