jQuery метод .ajaxComplete()

Определение и применение

jQuery метод .ajaxComplete() позволяет задать функцию (обработчик события), которая вызывается после завершения AJAX запроса.

Обращаю Ваше внимание, что каждый раз, когда AJAX запрос завершается jQuery инициирует событие ajaxComplete, при этом все обработчики события, которые были зарегистрированы при помощи метода .ajaxComplete() будут выполнены в данный момент. Метод .ajaxComplete() будет выполнен независимо от того как AJAX запрос был завершен (даже если он завершен неудачно).

Если методы $.ajax(), или $.ajaxSetup() используются с установленным параметром global со значением false, то обработчик ajaxComplete не будет вызван. Начиная с версии jQuery 1.9, все обработчики для глобальных AJAX событий, должны быть прикреплены к объекту document следующием образом:

$( document ).ajaxEvent( handler ) // пример добавления обработчика для глобального AJAX события

jQuery синтаксис:

Синтаксис 1.0:
.ajaxComplete( handler )

handler - Function( Event event, jqXHR jqXHR, PlainObject ajaxOptions )

Добавлен в версии jQuery

1.0

Значения параметров

Параметр	Описание
handler	Задает функцию, которая будет выполняться при завершении AJAX запроса. Является обязательным параметром метода. Функция принимает следующие параметры: event - содержит объект события Event. jqXHR - содержит объект XMLHTTPRequest ajaxOptions - содержит параметры, используемые в AJAX запросе.

Параметр

Описание

handler

Задает функцию, которая будет выполняться при завершении AJAX запроса. Является обязательным параметром метода. Функция принимает следующие параметры:

event - содержит объект события Event.
jqXHR - содержит объект XMLHTTPRequest
ajaxOptions - содержит параметры, используемые в AJAX запросе.

Пример использования

<!DOCTYPE html>
<html>
	<head>
		<title>Использование метода .ajaxComplete()</title>
		<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
		<script>
	$( document ).ready(function(){
	  $( "button" ).click(function(){ // задаем функцию при нажатиии на элемент <button>
	    $( "div" ).load( "test.php" ); // с использованием AJAX запроса загружаем данные с сервера и размещаем, возвращенный HTML код внутри элемента <div>
	  });
	  $( document ).ajaxComplete(function( event, xhr, options ){ // добавляем обработчик события
	    if ( options.url == "test.php" ) // если в объекте, содержащим настройки AJAX запроса ключ url содержит значение test.php
	      $( "span" ).text( "it's ajaxComplete" ); // то добавить в элемент  <span> текстовое содержимое
	  })
	});
		</script>
	</head>
	<body>
		<button>Клик</button><span></span>
		<br><br>
		<div></div>
	</body>
</html>

В этом примере с использованием jQuery метода .load() мы при нажатии на элемент <button> (кнопка) с использованием AJAX запроса загружаем данные с сервера и размещаем, возвращенный HTML код внутри элемента <div>. Загружаемый файл ("test.php") содержит следующий HTML код:

<h1>Заголовок первого уровня</h1>
<p>Обычный параграф</p>

Кроме того, мы с использованием метода .ajaxComplete() задаем функцию (обработчик события), которая вызывается после завершения AJAX запроса. Функция производит проверку на наличие в объекте, содержащего настройки AJAX запроса ключа "url", который содержит значение test.php. Если содержит, то в элемент <span> с использованием метода .text() производит добавление текстового содержимого.

Результат нашего примера:

Пример использования jQuery метода .ajaxComplete(). — Пример использования jQuery метода .ajaxComplete()

jQuery AJAX