Определение функции обратного вызова jQuery ajax для успеха


91

Я хочу использовать jQuery ajax для получения данных с сервера.

Я хочу поместить определение функции обратного вызова успеха за пределами .ajax()блока, как показано ниже. Итак, мне нужно объявить переменную, dataFromServerкак показано ниже, чтобы я мог использовать данные, возвращенные из обратного вызова успеха?

Я видел, как большинство людей определяют обратный вызов успеха внутри .ajax()блока. Итак, правильный ли следующий код, если я хочу определить обратный вызов успеха снаружи?

var dataFromServer;  //declare the variable first

function getData() {
    $.ajax({
        url : 'example.com',
        type: 'GET',
        success : handleData(dataFromServer)
    })
}

function handleData(data) {
    alert(data);
    //do some stuff
}

Ответы:


93

Просто используйте:

function getData() {
    $.ajax({
        url : 'example.com',
        type: 'GET',
        success : handleData
    })
}

successСвойство требует только ссылки на функцию, и передает данные в качестве параметра этой функции.

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

Однако это не считается для функций, объявленных так:

var myfunction = function(){}

Они доступны, только если их передал интерпретатор.

См. Этот вопрос для получения дополнительной информации о 2 способах объявления функций


1
@Alnitak, когда deferred objectsэто было представлено? Я этого раньше не видел. Кроме того, это кажется немного запутанным, поскольку код, определяющий, какой обратный вызов использовать, находится в другом месте, чем фактический вызов AJAX.
Cerbrus 07

4
он был введен в jQuery 1.5 и гораздо менее беспорядочный, чем использование success:. Отделение обратного вызова от AJAX - это хорошо ! См. Примечания, которые я только что добавил в конец своего ответа.
Альнитак

@Alnitak, я посмотрю. Посмотрим, смогу ли я убедиться: P
Cerbrus

@Alnitak: Всегда ли отложенные объекты предпочтительнее успешного обратного вызова? Благодарю.
Тонга

@tonga ИМХО да, очень предпочтительнее. Если бы ваш код, $.get()например, использовал , было бы невозможно добавить error:обработчик, потому что $.getон не поддерживает его. Однако вы можете добавить .failк отсроченному результату из $.get.
Альнитак

200

«Новый» способ сделать это, начиная с jQuery 1.5 (январь 2011 г.), заключается в использовании отложенных объектов вместо передачи successобратного вызова. Вы должны вернуть результат , $.ajaxа затем использовать .done, и .failт.д. методы для добавления обратных вызовов вне $.ajaxвызова .

function getData() {
    return $.ajax({
        url : 'example.com',
        type: 'GET'
    });
}

function handleData(data /* , textStatus, jqXHR */ ) {
    alert(data);
    //do some stuff
}

getData().done(handleData);

Это отделяет обработку обратного вызова от обработки AJAX, позволяет добавлять несколько обратных вызовов, обратных вызовов при сбоях и т. Д., И все это без необходимости изменять исходную getData()функцию. Отделение функциональности AJAX от набора действий, которые необходимо выполнить впоследствии, - это хорошо!.

Отложенные также позволяют намного проще синхронизировать несколько асинхронных событий, что вы не можете легко сделать с помощью success:

Например, я мог бы добавить несколько обратных вызовов, обработчик ошибок и дождаться истечения таймера, прежде чем продолжить:

// a trivial timer, just for demo purposes -
// it resolves itself after 5 seconds
var timer = $.Deferred();
setTimeout(timer.resolve, 5000);

// add a done handler _and_ an `error:` handler, even though `getData`
// didn't directly expose that functionality
var ajax = getData().done(handleData).fail(error);

$.when(timer, ajax).done(function() {
    // this won't be called until *both* the AJAX and the 5s timer have finished
});

ajax.done(function(data) {
    // you can add additional callbacks too, even if the AJAX call
    // already finished
});

Другие части jQuery также используют отложенные объекты - с ними вы можете очень легко синхронизировать анимацию jQuery с другими асинхронными операциями.


1
@Cerbrus, посмотрите новый пример, а затем подумайте, как бы вы это сделали без отложенных объектов
Альнитак,

Отложенные объекты @jbl - это фантастика. Я обычно отрицательно отношусь к любому ответу, который продвигает использование, success:потому что отложенные операции работают намного лучше.
Альнитак

@Cerbrus - именно так это и должно толковаться. Предлагаем Вам найти здесь user:6782 deferredдля много больше примеров.
Альнитак

Как можно использовать это с событием отправки формы?
haakym

Это alertхотя ... я лично использую , console.log(data)или если это массив: console.table(data):)
Armstrongest

16

Я не знаю, почему вы определяете параметр вне сценария. В этом нет необходимости. Ваша функция обратного вызова будет вызываться автоматически с возвращаемыми данными в качестве параметра. Очень возможно определить обратный вызов за пределами sucess:IE

function getData() {
    $.ajax({
        url : 'example.com',
        type: 'GET',
        success : handleData
    })
}

function handleData(data) {
    alert(data);
    //do some stuff
}

будет вызвана функция handleData и передан ей параметр функцией ajax.


6

Попробуйте переписать свой обработчик успеха на:

success : handleData

Свойство успеха метода ajax требует только ссылки на функцию.

В вашей функции handleData вы можете принимать до 3 параметров:

object data
string textStatus
jqXHR jqXHR

5

Я бы написал:

var handleData = function (data) {
    alert(data);
    //do some stuff
}


function getData() {
    $.ajax({
        url : 'example.com',
        type: 'GET',
        success : handleData
    })
}

15
Ваш код на самом деле никогда не используется, dataFromServerпоэтому первую строку можно удалить.
Энтони Грист

2

Объявлять переменную не нужно. Функция успеха Ajax автоматически принимает до 3-х параметров:Function( Object data, String textStatus, jqXHR jqXHR )


Как-то пришлось долго искать, чтобы найти эти параметры по умолчанию. Благодаря!
Payne,

2

через несколько часов поиграйте с ним, и оно почти станет тусклым. ко мне пришло чудо, все заработало.

<pre>


var listname = [];   


 $.ajax({
    url : wedding, // change to your local url, this not work with absolute url
    success: function (data) {
       callback(data);
    }
});

function callback(data) {
      $(data).find("a").attr("href", function (i, val) {
            if( val.match(/\.(jpe?g|png|gif)$/) ) { 
             //   $('#displayImage1').append( "<img src='" + wedding + val +"'>" );
                 listname.push(val);
            } 
        });
}

function myfunction() {

alert (listname);

}

</pre>

1
вам не нужно помещать еще один вызов функции для успеха. вы можете прямо сказать, что success : callbackjquery вызовет вашу функцию, вызываемую callbackс dataпараметром в ней.
Olgun Kaya 06

-1

В вашем компоненте, то есть угловом JS-коде:

function getData(){
    window.location.href = 'http://localhost:1036/api/Employee/GetExcelData';
}
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.