0Pricing
jQuery Academy · Урок

Отправка форм через AJAX и обратная связь

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

«Отправка форм через AJAX и обратная связь» — бесплатный урок jQuery Academy на CoddyKit. Это урок 3 из 3. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения jQuery Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс jQuery Academy содержит 3 уроков всего.

Плавная работа форм с AJAX

Представьте, что форма отправляется без полной перезагрузки страницы! В этом и заключается преимущество отправки формы с помощью AJAX.

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

Остановка стандартной отправки

Первый шаг при отправке формы с помощью AJAX — предотвратить стандартное поведение браузера. Если этого не сделать, страница перезагрузится как обычно, и смысл использования AJAX будет утрачен!

Для этого внутри обработчика отправки формы вызывается event.preventDefault().

<form id="myForm">
  <label for="username">Name:</label>
  <input type="text" id="username" name="username" placeholder="Your name">
  <button type="submit">Submit</button>
</form>
<div id="status"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
  $(document).ready(function() {
    $('#myForm').submit(function(event) {
      event.preventDefault(); // Stop default form submission
      $('#status').text("Form submission prevented!");
      console.log("Form submission prevented!");
    });
  });
</script>

Подготовка данных формы

Перед отправкой данных формы через AJAX нужно правильно упаковать их. Для этого отлично подходит метод .serialize() в jQuery!

  • Он автоматически собирает значения всех элементов input, select и textarea внутри формы.
  • Он кодирует их в строку, закодированную для URL (например, name=Alice&email=alice%40example.com).
  • Эта строка является стандартным форматом отправки данных формы на сервер.
<form id="dataForm">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" value="Bob">
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" value="bob@example.com">
  <button type="submit">Get Data</button>
</form>
<div id="output"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
  $(document).ready(function() {
    $('#dataForm').submit(function(event) {
      event.preventDefault();
      let formData = $(this).serialize();
      $('#output').text("Serialized: " + formData);
      console.log(formData); // name=Bob&email=bob%40example.com
    });
  });
</script>

Отправка запроса AJAX

После сериализации данных формы мы можем отправить их на сервер. jQuery предлагает несколько методов AJAX, но $.post() — это удобное сокращение для отправки данных с помощью метода HTTP POST.

Ему передаются URL сервера, сериализованные данные и необязательная функция обратного вызова, которая запускается при успешном выполнении запроса.

<form id="submitForm">
  <label for="msg">Message:</label>
  <input type="text" id="msg" name="message" value="Hello AJAX!">
  <button type="submit">Send</button>
</form>
<div id="response"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
  $(document).ready(function() {
    $('#submitForm').submit(function(event) {
      event.preventDefault();
      let formData = $(this).serialize();
      // Using a dummy API endpoint for demonstration
      $.post("https://jsonplaceholder.typicode.com/posts", formData, function(data) {
        $('#response').text("Success! Server ID: " + data.id);
        console.log("Server response:", data);
      });
    });
  });
</script>

Отображение информации о загрузке

Когда пользователь нажимает кнопку отправки, он ожидает немедленной реакции. Поскольку запросы AJAX выполняются асинхронно, возникает задержка. Поэтому важно показывать визуальную обратную связь!

Пока запрос выполняется, можно показать сообщение «Загрузка...» или индикатор загрузки, а после получения ответа скрыть его.

<style>
  #loading { display: none; color: gray; }
</style>
<form id="feedbackForm">
  <label for="item">Item:</label>
  <input type="text" id="item" name="item" value="New Widget">
  <button type="submit">Add</button>
</form>
<div id="loading">Loading...</div>
<div id="status"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
  $(document).ready(function() {
    $('#feedbackForm').submit(function(event) {
      event.preventDefault();
      $('#loading').show(); // Show loading indicator
      $('#status').text(''); // Clear previous status
      let formData = $(this).serialize();
      $.post("https://jsonplaceholder.typicode.com/posts", formData, function(data) {
        $('#loading').hide(); // Hide loading
        $('#status').text("Item added with ID: " + data.id);
      });
    });
  });
</script>

Обработка успешных ответов

После успешной обработки данных формы сервер обычно отправляет ответ. Это может быть подтверждающее сообщение, ID только что созданной записи или обновлённые данные.

Функция обратного вызова success (третий аргумент в $.post()) получает эти данные, что позволяет соответствующим образом обновить интерфейс.

<form id="addTodoForm">
  <label for="todoTitle">Todo:</label>
  <input type="text" id="todoTitle" name="title" placeholder="New todo item">
  <button type="submit">Add Todo</button>
</form>
<ul id="todoList"></ul>
<div id="message"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
  $(document).ready(function() {
    $('#addTodoForm').submit(function(event) {
      event.preventDefault();
      $('#message').text('Adding...');
      let formData = $(this).serialize();
      $.post("https://jsonplaceholder.typicode.com/todos", formData, function(todo) {
        $('#message').text('Todo added!');
        $('#todoList').append('<li>' + todo.title + ' (ID: ' + todo.id + ')</li>');
        $('#addTodoForm')[0].reset(); // Clear form fields
      });
    });
  });
</script>

Корректная обработка ошибок

Не каждый запрос завершается успешно. Проблемы с сетью, ошибки сервера или некорректные данные могут привести к сбою запроса AJAX. Крайне важно корректно обрабатывать такие ошибки и информировать пользователя.

Для $.post() можно добавить цепочку с методом .fail(). Для $.ajax() можно использовать обратный вызов error или метод .fail() у возвращённого объекта Deferred.

<form id="errorForm">
  <label for="badData">Data:</label>
  <input type="text" id="badData" name="data" value="bad value">
  <button type="submit">Submit</button>
</form>
<div id="errorMessage" style="color: red;"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
  $(document).ready(function() {
    $('#errorForm').submit(function(event) {
      event.preventDefault();
      $('#errorMessage').text('');
      let formData = $(this).serialize();
      // Simulating an error by posting to a non-existent endpoint
      $.ajax({
        url: "https://jsonplaceholder.typicode.com/nonexistent-endpoint", // Will cause a 404 error
        type: "POST",
        data: formData
      })
      .done(function(data) {
        $('#errorMessage').text("Unexpected success!");
      })
      .fail(function(jqXHR, textStatus, errorThrown) {
        $('#errorMessage').text("Error: " + textStatus + " - " + errorThrown);
        console.error("AJAX Error:", textStatus, errorThrown);
      });
    });
  });
</script>

Очистка формы после отправки

После успешной отправки формы рекомендуется очистить поля ввода. Это предотвращает случайную повторную отправку и подготавливает форму для следующего действия.

Можно использовать встроенный в DOM метод .reset() для элемента формы или вручную очистить значения отдельных полей.

<form id="clearForm">
  <label for="item">Item:</label>
  <input type="text" id="item" name="item" value="Item A">
  <label for="quantity">Quantity:</label>
  <input type="number" id="quantity" name="quantity" value="1">
  <button type="submit">Add</button>
</form>
<div id="feedbackMsg" style="color: green;"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
  $(document).ready(function() {
    $('#clearForm').submit(function(event) {
      event.preventDefault();
      $('#feedbackMsg').text('Submitting...');
      let formData = $(this).serialize();
      $.post("https://jsonplaceholder.typicode.com/posts", formData, function(data) {
        $('#feedbackMsg').text('Successfully added! ID: ' + data.id);
        $('#clearForm')[0].reset(); // Clears all form fields
      });
    });
  });
</script>

Полный пример формы AJAX

Объединим все изученные приёмы: предотвращение стандартной отправки, сериализацию данных, отправку запроса AJAX, отображение информации о загрузке, обработку успешных ответов и ошибок и, наконец, очистку формы.

Такой комплексный подход обеспечивает надёжную и удобную работу с формой AJAX.

<style>
  #loader { display: none; color: blue; }
  #result { margin-top: 10px; font-weight: bold; }
</style>
<form id="fullAjaxForm">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" required>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required>
  <button type="submit">Register</button>
</form>
<div id="loader">Processing...</div>
<div id="result"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
  $(document).ready(function() {
    $('#fullAjaxForm').submit(function(event) {
      event.preventDefault(); // Stop default form submission
      $('#loader').show();    // Show loading indicator
      $('#result').text('');  // Clear previous results
      let formData = $(this).serialize(); // Serialize form data
      
      $.ajax({
        url: "https://jsonplaceholder.typicode.com/users", // Dummy API endpoint
        type: "POST",
        data: formData,
        dataType: "json" // Expect JSON response
      })
      .done(function(response) {
        $('#result').css('color', 'green').text('Registration successful! ID: ' + response.id);
        $('#fullAjaxForm')[0].reset(); // Clear form fields
      })
      .fail(function(jqXHR, textStatus, errorThrown) {
        $('#result').css('color', 'red').text('Registration failed: ' + textStatus);
        console.error("AJAX Error:", textStatus, errorThrown);
      })
      .always(function() {
        $('#loader').hide(); // Always hide loading indicator
      });
    });
  });
</script>

Проверьте понимание материала

Вы узнали, как отправлять формы с помощью AJAX и обеспечивать обратную связь в реальном времени. Давайте проверим Ваши знания!

Повторение: плавная отправка форм

Поздравляем! Вы освоили отправку форм с помощью AJAX и научились улучшать веб-приложения, делая взаимодействие с ними плавным и ненавязчивым.

  • Вы научились предотвращать стандартное поведение формы с помощью event.preventDefault().
  • Вы использовали .serialize() для простой подготовки данных формы к передаче.
  • Вы реализовали отправку данных в асинхронном режиме с помощью $.post() или $.ajax().
  • Вы добавили важную обратную связь в реальном времени для состояний загрузки, успеха и ошибки.
  • Наконец, Вы научились очищать формы после отправки, чтобы интерфейс оставался чистым.

Эти навыки необходимы для создания современных и отзывчивых веб-форм!

Часто задаваемые вопросы

Урок «Отправка форм через AJAX и обратная связь» бесплатный?

Да — полный текст урока «Отправка форм через AJAX и обратная связь» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс jQuery Academy, подпишись на CoddyKit PRO. Курс jQuery Academy содержит 3 уроков всего.

Чему я научусь в уроке «Отправка форм через AJAX и обратная связь»?

Освойте асинхронную отправку данных формы через AJAX, обеспечивайте пользователям обратную связь в реальном времени и обрабатывайте ответы сервера без полной перезагрузки страницы для более удобного… Ты практикуешь jQuery Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать jQuery Academy?

Предыдущий опыт не требуется. jQuery Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 3.

Сколько времени занимает урок «Отправка форм через AJAX и обратная связь»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке jQuery Academy?

Да. Каждый урок jQuery Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. Динамическое управление полями формы
  2. Логика проверки форм на стороне клиента
  3. Отправка форм через AJAX и обратная связь
← Назад к jQuery Academy