.ajaxComplete()

Одним из наиболее полезных методов jQuery для работы с Ajax является .ajaxComplete(). Этот метод позволяет выполнить определенное действие после завершения Ajax-запроса. В этой статье мы рассмотрим подробную инструкцию и практические примеры по использованию .ajaxComplete() в jQuery.

Пример 1: Отображение сообщения об успешном выполнении запроса

Один из наиболее распространенных случаев использования .ajaxComplete() в jQuery - это отображение сообщения об успешном выполнении запроса. Например, вы можете использовать этот метод для вывода сообщения «Данные успешно сохранены на сервере» после отправки формы.

$(document).ajaxComplete(function() {
  alert('Данные успешно сохранены на сервере');
});

Пример 2: Отображение сообщения об ошибке при выполнении запроса

Вы также можете использовать .ajaxComplete() для отображения сообщения об ошибке, если Ajax-запрос не удалось выполнить.

$(document).ajaxComplete(function(event, xhr, settings) {
  if (xhr.status == 404) {
    alert('Ошибка: запрашиваемая страница не найдена');
  }
});

Пример 3: Изменение содержимого элемента страницы после выполнения запроса

Вы можете использовать .ajaxComplete() для изменения содержимого элемента страницы после выполнения Ajax-запроса. Например, вы можете использовать этот метод для обновления содержимого таблицы после отправки формы.

$(document).ajaxComplete(function() {
  $('table').load('table.php');
});

Пример 4: Отображение прогресса выполнения запроса

Используя .ajaxComplete(), вы можете отображать прогресс выполнения запроса на странице. Например, вы можете использовать этот метод для отображения индикатора загрузки при выполнении запроса.

$(document).ajaxComplete(function() {
  $('#loader').hide();
});

Пример 5: Изменение URL-адреса страницы после выполнения запроса

Вы можете использовать .ajaxComplete() для изменения URL-адреса страницы после выполнения Ajax-запроса. Например, вы можете использовать этот метод для изменения URL-адреса в адресной строке браузера после отправки формы.

$(document).ajaxComplete(function() {
  history.pushState(null, null, '/new-url');
});

Пример 6: Отключение кнопки отправки формы после выполнения запроса

Используя .ajaxComplete(), вы можете отключить кнопку отправки формы после выполнения Ajax-запроса. Например, вы можете использовать этот метод для предотвращения повторной отправки формы.

$(document).ajaxComplete(function() {
  $('form').find('input[type="submit"]').prop('disabled', true);
});

Пример 7: Отображение ошибок валидации формы после выполнения запроса

Вы можете использовать .ajaxComplete() для отображения ошибок валидации формы после выполнения Ajax-запроса. Например, вы можете использовать этот метод для отображения сообщений об ошибках, если пользователь ввел неправильные данные в форму.

$(document).ajaxComplete(function() {
  var errors = JSON.parse(xhr.responseText);
  $.each(errors, function(key, value) {
    $('input[name="' + key + '"]').after('<span class="error">' + value + '</span>');
  });
});

Пример 8: Отображение дополнительной информации после выполнения запроса

Используя .ajaxComplete(), вы можете отображать дополнительную информацию на странице после выполнения Ajax-запроса. Например, вы можете использовать этот метод для отображения дополнительных данных, связанных с отправленной формой.

$(document).ajaxComplete(function() {
  var data = JSON.parse(xhr.responseText);
  $('#additional-info').html(data.additional_info);
});

Пример 9: Отображение сообщения о времени выполнения запроса

Вы можете использовать .ajaxComplete() для отображения сообщения о времени выполнения запроса на странице. Например, вы можете использовать этот метод для отображения сообщения «Запрос выполнен за 2 секунды».

$(document).ajaxComplete(function() {
  var time = new Date().getTime() - settings.startTime;
  alert('Запрос выполнен за ' + time + ' миллисекунд');
});

Пример 10: Отображение сообщения об отмене запроса

Используя .ajaxComplete(), вы можете отображать сообщение об отмене запроса на странице. Например, вы можете использовать этот метод для отображения сообщения «Запрос был отменен».

$(document).ajaxComplete(function(event, xhr, settings) {
  if (settings.abort) {
    alert('Запрос был отменен');
  }
});

Заключение

В этой статье мы рассмотрели подробную инструкцию по использованию .ajaxComplete() в jQuery. Этот метод является мощным инструментом для работы с Ajax-запросами и может быть использован для решения широкого спектра задач на веб-страницах.