Definição da função de retorno de chamada de sucesso do jQuery ajax

89

Eu quero usar jQuery ajax para recuperar dados de um servidor.

Quero colocar a definição da função de retorno de chamada de sucesso fora do .ajax()bloco, como a seguir. Então, preciso declarar a variável dataFromServercomo a seguir para poder usar os dados retornados do retorno de chamada de sucesso?

Já vi a maioria das pessoas definir o retorno de chamada de sucesso dentro do .ajax()bloco. Portanto, o código a seguir está correto se eu quiser definir o retorno de chamada de sucesso externo?

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
}
tonga
fonte

Respostas:

93

Apenas use:

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

A successpropriedade requer apenas uma referência a uma função e passa os dados como parâmetro para esta função.

Você pode acessar sua handleDatafunção assim por causa da forma como ela handleDataé declarada. JavaScript analisará seu código para as declarações de função antes de executá-lo, portanto, você poderá usar a função no código anterior à declaração real. Isso é conhecido como içamento .

No entanto, isso não conta para funções declaradas desta forma:

var myfunction = function(){}

Eles só estão disponíveis quando o intérprete os passa.

Veja esta pergunta para obter mais informações sobre as 2 maneiras de declarar funções

Cerbrus
fonte
1
@Alnitak, quando a deferred objectscoisa foi apresentada? Eu não vi isso antes. Além disso, parece um pouco confuso, já que o código que define qual retorno de chamada usar está em um local diferente do que a chamada AJAX real.
Cerbrus
4
foi introduzido no jQuery 1.5 e é muito menos confuso do que usar success:. Separar o retorno de chamada do AJAX é uma coisa boa ! Veja as notas que acabei de adicionar ao final da minha resposta.
Alnitak
@Alnitak, vou dar uma olhada. Vamos ver se consigo me convencer: P
Cerbrus
@Alnitak: Os objetos adiados são sempre preferidos ao retorno de chamada de sucesso? Obrigado.
tonga
@tonga IMHO, sim, muito preferido. Se o seu código estivesse usando, $.get()por exemplo, seria impossível adicionar um error:manipulador porque $.getnão o suporta. No entanto, você pode adicionar um .failao resultado adiado de $.get.
Alnitak
198

A "nova" maneira de fazer isso desde jQuery 1.5 (janeiro de 2011) é usar objetos adiados em vez de passar um successretorno de chamada. Você deve retornar o resultado de $.ajaxe, em seguida, usar os métodos .done, .failetc para adicionar os retornos de$.ajax chamada fora da chamada .

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

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

getData().done(handleData);

Isso separa o tratamento de callback do tratamento AJAX, permite que você adicione múltiplos callbacks, callbacks de falha, etc, tudo sem nunca precisar modificar a getData()função original . Separar a funcionalidade AJAX do conjunto de ações a serem concluídas posteriormente é uma coisa boa! .

Os adiados também permitem uma sincronização muito mais fácil de vários eventos assíncronos, que você não pode fazer facilmente apenas com success:

Por exemplo, eu poderia adicionar vários retornos de chamada, um gerenciador de erros e esperar que um cronômetro transcorra antes de continuar:

// 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
});

Outras partes do jQuery também usam objetos adiados - você pode sincronizar animações do jQuery com outras operações assíncronas muito facilmente com eles.

Alnitak
fonte
1
@Cerbrus veja o novo exemplo e, em seguida, considere como você faria isso sem objetos adiados
Alnitak
Objetos adiados @jbl são fantásticos. Normalmente eu voto negativo para qualquer resposta que promova o uso de success:porque adiados funcionam muito melhor.
Alnitak
@Cerbrus é exatamente assim que deve ser interpretado. Sugiro que você pesquise aqui user:6782 deferredpor muitos mais exemplos.
Alnitak
Como alguém poderia utilizar isso com um evento de envio de formulário?
haakym
Que alertembora ... Eu pessoalmente uso console.log(data)ou se é uma matriz: console.table(data):)
Armstrongest
16

Não sei por que você está definindo o parâmetro fora do script. Isso é desnecessário. Sua função de retorno de chamada será chamada com os dados de retorno como um parâmetro automaticamente. É muito possível definir o seu retorno de chamada fora do sucess:ie

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

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

a função handleData será chamada e o parâmetro passado a ela pela função ajax.

BinaryTox1n
fonte
6

Tente reescrever seu gerenciador de sucesso para:

success : handleData

A propriedade de sucesso do método ajax requer apenas uma referência a uma função.

Em sua função handleData, você pode usar até 3 parâmetros:

object data
string textStatus
jqXHR jqXHR
Indefinido
fonte
5

Eu escreveria :

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


function getData() {
    $.ajax({
        url : 'example.com',
        type: 'GET',
        success : handleData
    })
}
jbl
fonte
15
Seu código nunca realmente usa dataFromServerpara que a primeira linha possa ser removida.
Anthony Grist
2

depois de algumas horas, brinque com ele e quase se torne maçante. milagre veio a mim, funcionou.

<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>
Võ Minh
fonte
1
você não precisa colocar outra chamada de função para obter sucesso. você pode dizer diretamente que success : callbackjquery irá acionar sua função chamada callbackcom o dataparâmetro nela.
Olgun Kaya
1

Você não precisa declarar a variável. A função de sucesso do Ajax leva automaticamente até 3 parâmetros:Function( Object data, String textStatus, jqXHR jqXHR )

Lukas Bijaminas
fonte
-1

Em seu componente, ou seja, código JS angular:

function getData(){
    window.location.href = 'http://localhost:1036/api/Employee/GetExcelData';
}
Shivani Jadhav
fonte