jQuery метод .ajaxSuccess()

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

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

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

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

jQuery синтаксис:

Синтаксис 1.0:

.ajaxSuccess( handler )

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

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

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

Пример старого кода

Метод .ajaxSuccess() — пример 1

Нажмите ▶. Используйте кнопки в результате и наблюдайте изменения. Измените JavaScript и запустите пример повторно. Используется jQuery 4.0.0.

index.html

HTML

<button>Клик</button><span></span> <br /><br />
<div></div>

main.js

JavaScript

$(document).ready(function () {
    $('button').click(function () {
        // задаем функцию при нажатиии на элемент <button>
        $('div').load('message.html') // с использованием AJAX запроса загружаем данные с сервера и размещаем, возвращенный HTML код внутри элемента <div>
    })
    $(document).ajaxSuccess(function (event, xhr, options, data) {
        // добавляем обработчик события
        if (options.url == 'message.html')
            // если в объекте, содержащим настройки AJAX запроса ключ url содержит значение message.html
            $('span').text("it's ajaxSuccess") // то добавить в элемент  <span> текстовое содержимое
        console.log(data) // выводим информацию в консоль браузера о данных, которые будут отправлены на сервер.
    })
})

style.css

CSS

body {
  margin: 16px;
  font:
    16px/1.5 system-ui,
    sans-serif;
  overflow-wrap: anywhere;
}
img,
input,
select,
textarea,
button {
  max-width: 100%;
}

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

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

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

<button>Клик</button><span></span><br /><br />
<div></div>

$(document).ready(function () {
    $('button').click(function () {
        $('div').load('message.html')
    })

    $(document).ajaxSuccess(function (event, xhr, options, data) {
        if (options.url == 'message.html') $('span').text("it's ajaxSuccess")
        console.log(data)
    })
})