Определение функции обратного вызова JQuery AJAX

Я хочу использовать 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
}

8 ответов

Решение

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

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

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

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

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

var myfunction = function(){}

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

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

"Новый" способ сделать это, начиная с версии jQuery 1.5 (январь 2011 г.), состоит в использовании отложенных объектов вместо передачи success Перезвоните. Вы должны вернуть результат $.ajax а затем использовать .done, .fail методы etc, чтобы добавить обратные вызовы вне $.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 с другими асинхронными операциями.

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

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

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

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

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

success : handleData

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

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

object data
string textStatus
jqXHR jqXHR

Я бы написал:

var dataFromServer;  //declare the variable first

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


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

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

<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>

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

В вашем компоненте т.е. угловой код JS:

function getData(){
    window.location.href = 'http://localhost:1036/api/Employee/GetExcelData';
}
Другие вопросы по тегам