Definición de la función de devolución de llamada de éxito de jQuery ajax

90

Quiero usar jQuery ajax para recuperar datos de un servidor.

Quiero poner la definición de la función de devolución de llamada exitosa fuera del .ajax()bloque como se muestra a continuación. Entonces, ¿necesito declarar la variable de dataFromServerla siguiente manera para poder utilizar los datos devueltos de la devolución de llamada exitosa?

He visto a la mayoría de la gente definir la devolución de llamada exitosa dentro del .ajax()bloque. Entonces, ¿es correcto el siguiente código si quiero definir la devolución de llamada exitosa afuera?

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
fuente

Respuestas:

93

Solo usa:

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

La successpropiedad requiere solo una referencia a una función y pasa los datos como parámetro a esta función.

Puede acceder a su handleDatafunción de esta manera debido a la forma en que handleDatase declara. JavaScript analizará su código para las declaraciones de funciones antes de ejecutarlo, por lo que podrá usar la función en el código que está antes de la declaración real. Esto se conoce como elevación .

Sin embargo, esto no cuenta para funciones declaradas como esta:

var myfunction = function(){}

Estos solo están disponibles cuando el intérprete los aprobó.

Consulte esta pregunta para obtener más información sobre las 2 formas de declarar funciones

Cerbrus
fuente
1
@Alnitak, ¿cuándo se presentó la deferred objectscosa? No lo había visto antes. Además, parece un poco complicado, ya que el código que define qué devolución de llamada usar está en una ubicación diferente a la llamada AJAX real.
Cerbrus
4
se introdujo en jQuery 1.5 y es mucho menos complicado que usar success:. ¡Desacoplar la devolución de llamada del AJAX es algo bueno ! Vea las notas que acabo de agregar al final de mi respuesta.
Alnitak
@Alnitak, echaré un vistazo. Veamos si puedo convencerme: P
Cerbrus
@Alnitak: ¿Se prefieren siempre los objetos diferidos a la devolución de llamada exitosa? Gracias.
Tonga
@tonga En mi humilde opinión, sí, muy preferido. Si su código hubiera estado usando, $.get()por ejemplo, habría sido imposible agregar un error:controlador porque $.getno lo admite. Sin embargo, puede agregar un .failal resultado diferido de $.get.
Alnitak
199

La "nueva" forma de hacer esto desde jQuery 1.5 (enero de 2011) es usar objetos diferidos en lugar de pasar una successdevolución de llamada. Debe devolver el resultado de $.ajaxy luego usar los métodos .done, .failetc. para agregar las devoluciones de$.ajax llamada fuera de la llamada .

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

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

getData().done(handleData);

Esto desacopla el manejo de devolución de llamada del manejo de AJAX, le permite agregar múltiples devoluciones de llamada, devoluciones de llamada fallidas, etc., todo sin necesidad de modificar la getData()función original . ¡Separar la funcionalidad AJAX del conjunto de acciones que se completarán después es algo bueno! .

Los diferidos también permiten una sincronización mucho más fácil de múltiples eventos asincrónicos, lo que no se puede hacer fácilmente solo con success:

Por ejemplo, podría agregar múltiples devoluciones de llamada, un controlador de errores y esperar a que transcurra un temporizador 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
});

Otras partes de jQuery también usan objetos diferidos: puede sincronizar las animaciones de jQuery con otras operaciones asíncronas muy fácilmente con ellas.

Alnitak
fuente
1
@Cerbrus vea el nuevo ejemplo y luego considere cómo lo haría sin objetos diferidos
Alnitak
Los objetos diferidos de @jbl son fantásticos. Yo normalmente downvote cualquier respuesta que promueve el uso de success:porque deferreds simplemente funcionan mucho mejor.
Alnitak
@Cerbrus, así es exactamente como se supone que debe interpretarse. Sugerimos que busque aquí para user:6782 deferredpara muchas más ejemplos.
Alnitak
¿Cómo se puede utilizar esto con un evento de envío de formulario?
haakym
Eso alertsin embargo ... Yo personalmente usaría console.log(data)o si es una matriz: console.table(data):)
Armstrongest
16

No sé por qué está definiendo el parámetro fuera del script. Eso es innecesario. Su función de devolución de llamada se llamará con los datos de retorno como parámetro automáticamente. Es muy posible definir su devolución de llamada fuera del sucess:ie

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

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

se llamará a la función handleData y la función ajax le pasará el parámetro.

BinaryTox1n
fuente
6

Intente reescribir su controlador de éxito para:

success : handleData

La propiedad de éxito del método ajax solo requiere una referencia a una función.

En su función handleData puede tomar hasta 3 parámetros:

object data
string textStatus
jqXHR jqXHR
Indefinido
fuente
5

Yo escribiría :

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


function getData() {
    $.ajax({
        url : 'example.com',
        type: 'GET',
        success : handleData
    })
}
jbl
fuente
15
Su código nunca se usa realmente, dataFromServerpor lo que la primera línea se puede eliminar.
Anthony Grist
2

No es necesario declarar la variable. La función de éxito de Ajax toma automáticamente hasta 3 parámetros:Function( Object data, String textStatus, jqXHR jqXHR )

Lukas Bijaminas
fuente
De alguna manera tuve que buscar por un tiempo para encontrar esos parámetros predeterminados. ¡Gracias!
Pago el
2

después de unas horas juega con él y casi se vuelve aburrido. El milagro vino a mí, funciona.

<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
fuente
1
no es necesario realizar otra llamada de función para tener éxito. puede decir directamente que success : callbackjquery activará su función llamada callbackcon el dataparámetro en ella.
Olgun Kaya
-1

En su componente, es decir, código JS angular:

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