Обработка событий успеха и ошибок в jQuery AJAX

jQuery предоставляет мощные инструменты для обработки AJAX-событий. Рассмотрим, как работать с событиями успешного выполнения запроса и ошибок.

Базовые события AJAX:

$.ajax({
  url: 'your-script.php',
  type: 'GET'
})
.done(function(data) {  // Успешное выполнение
  console.log("Успех:", data);
})
.fail(function(jqXHR, textStatus) {  // Ошибка
  console.error("Ошибка:", textStatus);
})
.always(function() {  // Завершение (выполняется всегда)
  console.log("Запрос завершен");
});

Ключевые особенности обработки событий:

1. done() (или success)

   • Срабатывает при успешном HTTP-ответе (статусы 200-299)

   • Принимает данные ответа сервера

   • Лучшее место для обновления интерфейса

2. fail() (или error)

   • Срабатывает при сетевых ошибках или статусах 400+

   • Принимает объект jqXHR и текстовый статус

   • Обязательно обрабатывайте для отладки

3. always()

   • Выполняется после завершения запроса (независимо от результата)

   • Идеально для скрытия лоадеров и финальных операций

Практический пример с обработкой ошибок:

$('.btn-add').click(function() {
  $.ajax({
    url: '/api/add-to-cart',
    data: { 
      id: $(this).data('id'),
      count: $(this).prev('.quantity').val()
    }
  })
  .done(function(response) {
    if(response.success) {
      showNotification('Товар добавлен!');
    } else {
      showError(response.message);  // Обработка бизнес-ошибки
    }
  })
  .fail(function(xhr) {
    const status = xhr.status;
    if(status === 0) showError('Нет сети');
    else if(status >= 500) showError('Ошибка сервера');
    else showError(`Ошибка ${status}: ${xhr.statusText}`);
  })
  .always(function() {
    hideLoader();
  });
});

Важные нюансы:

1. Статусы ошибок:

   • 0: Network error (нет подключения)

   • 4xx: Клиентские ошибки (404, 403 и т.д.)

   • 5xx: Серверные ошибки

2. Цепочки вызовов:

.done(firstRequest)
.fail(handleFirstError)
.done(function() {
  $.ajax(...)  // Вложенный запрос
    .done(secondRequest)
    .fail(handleSecondError);
});

1. Для загрузки файлов (FormData) обработка событий остается аналогичной:

$.ajax({
  url: '/upload',
  type: 'POST',
  data: formData,
  processData: false
})
.done(() => console.log('Файл загружен'))
.fail((xhr) => console.error('Ошибка загрузки:', xhr.status));

Рекомендации:

• Всегда обрабатывайте ошибки через .fail()

• Используйте .always() для очистки ресурсов

• Проверяйте статус ошибки в объекте jqXHR

• Для сложных сценариев используйте цепочки промисов

Грамотная обработка AJAX-событий — ключ к стабильной работе веб-приложений и качественной пользовательской обратной связи при ошибках.