Skip to main content

Ajax и PHP. Введение.

Решил написать серию уроков по использованию 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);

Я дополнил код комментариями чтобы долго не описывать весь процесс, думаю по коду будет понятно, в кратце:

  1. Задаём заголовок application/json
  2. Создаём массив со стандартным ответом
  3. Задаём заголовок по умолчанию (400 Bad Request)
  4. Проверяем наш суперглобальный массив на наличие нужного индекса
  5. Устанавливаем ответ
  6. Устанавливаем код ответа 200 ОК
  7. Выводим результат, да, именно так, через 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 обрабатывает и выводит на странице

Принцип работы довольно простой, далее мы будем разбирать более сложные примеры.

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

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