Отправка форм с помощью AJAX и jQuery

Традиционная отправка HTML-формы приводит к перезагрузке страницы. Это поведение удобно не всегда, особенно когда требуется динамическое взаимодействие с пользователем. Использование AJAX позволяет отправлять данные формы асинхронно, без перезагрузки страницы.

Ниже рассматривается базовый подход к отправке формы с использованием jQuery и AJAX.

Подключение jQuery и базовая разметка формы

Для начала требуется HTML-форма. В ней задаются стандартные поля ввода и кнопка отправки.

<form id="form">
  <div>
    <label for="name">Name:</label>
    <input type="text" id="name" name="name">
  </div>

  <div>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email">
  </div>

  <button type="submit">Submit</button>
</form>

<div id="form-messages"></div>

Подключение jQuery выполняется через CDN:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

Перехват отправки формы

По умолчанию браузер отправляет форму и перезагружает страницу. Это поведение необходимо отключить и заменить обработкой через JavaScript.

$(document).ready(function () {
  $('#form').submit(function (event) {
    event.preventDefault();
  });
});

Метод event.preventDefault() отменяет стандартное поведение формы.

Получение данных формы

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

var formData = $(this).serialize();

Полученная строка будет иметь формат:

name=John&email=john@example.com

Отправка данных через AJAX

После подготовки данных выполняется AJAX-запрос.

$(document).ready(function () {
  $('#form').submit(function (event) {
    event.preventDefault();

    var form = $(this);
    var formData = form.serialize();

    $.ajax({
      type: 'POST',
      url: form.attr('action'),
      data: formData
    })
    .done(function (response) {
      $('#form-messages').removeClass('error');
      $('#form-messages').addClass('success');

      $('#form-messages').text(response);

      $('#name').val('');
      $('#email').val('');
    })
    .fail(function (data) {
      $('#form-messages').removeClass('success');
      $('#form-messages').addClass('error');

      if (data.responseText !== '') {
        $('#form-messages').text(data.responseText);
      } else {
        $('#form-messages').text('An error occurred and your message could not be sent.');
      }
    });
  });
});

В параметрах запроса указывается метод POST, URL берётся из атрибута action формы, а данные передаются через data.

Обработка ответа сервера

После выполнения запроса возможны два сценария: успешный ответ или ошибка.

При успешной отправке:

.done(function (response) {
  $('#form-messages').removeClass('error');
  $('#form-messages').addClass('success');

  $('#form-messages').text(response);

  $('#name').val('');
  $('#email').val('');
});

Ответ сервера отображается пользователю, а поля формы очищаются.

При ошибке:

.fail(function (data) {
  $('#form-messages').removeClass('success');
  $('#form-messages').addClass('error');

  if (data.responseText !== '') {
    $('#form-messages').text(data.responseText);
  } else {
    $('#form-messages').text('An error occurred and your message could not be sent.');
  }
});

Если сервер возвращает текст ошибки, он выводится в блок сообщений. В противном случае отображается стандартное сообщение.

Пример серверной обработки (PHP)

Для корректной работы требуется обработчик на сервере. Пример на PHP:

<?php

if ($_SERVER["REQUEST_METHOD"] == "POST") {

  $name = strip_tags(trim($_POST["name"]));
  $email = filter_var(trim($_POST["email"]), FILTER_SANITIZE_EMAIL);

  if (empty($name) || empty($email) || !filter_var($email, FILTER_VALIDATE_EMAIL)) {
    http_response_code(400);
    echo "Please complete the form and try again.";
    exit;
  }

  $recipient = "you@example.com";
  $subject = "New contact from $name";

  $email_content = "Name: $name\n";
  $email_content .= "Email: $email\n";

  $email_headers = "From: $name <$email>";

  if (mail($recipient, $subject, $email_content, $email_headers)) {
    http_response_code(200);
    echo "Thank You! Your message has been sent.";
  } else {
    http_response_code(500);
    echo "Oops! Something went wrong and we couldn’t send your message.";
  }

} else {
  http_response_code(403);
  echo "There was a problem with your submission.";
}

Сервер проверяет входные данные, формирует письмо и возвращает соответствующий HTTP-код и сообщение.

Итоговая структура

HTML-форма отвечает за ввод данных, jQuery перехватывает отправку и выполняет AJAX-запрос, сервер обрабатывает данные и возвращает результат, который отображается пользователю без перезагрузки страницы.