web-dev-qa-db-fra.com

Définition de la fonction de rappel jQuery ajax success

Je veux utiliser ajax jQuery pour récupérer des données d'un serveur.

Je souhaite placer la définition de la fonction de rappel de succès en dehors du bloc .ajax() comme ci-dessous. Alors, dois-je déclarer la variable dataFromServer comme ci-dessous pour pouvoir utiliser les données renvoyées par le rappel de réussite?

J'ai vu la plupart des gens définir le rappel de réussite à l'intérieur du bloc .ajax(). Le code suivant est-il donc correct si je veux définir le rappel de réussite à l'extérieur?

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
}
javascriptjqueryajax
82
tonga

Il suffit d'utiliser:

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

La propriété success nécessite uniquement une référence à une fonction et transmet les données en tant que paramètre à cette fonction.

Vous pouvez accéder à votre fonction handleData de cette manière à cause de la façon dont handleData est déclaré. JavaScript analysera votre code pour les déclarations de fonction avant de l'exécuter, vous pourrez donc utiliser la fonction dans le code qui précède la déclaration. Ceci est appelé levage .

Cela ne compte pas pour les fonctions déclarées comme ceci, cependant:

var myfunction = function(){}

Celles-ci ne sont disponibles que lorsque l'interprète les a passées.

Voir cette question pour plus d'informations sur les 2 façons de déclarer des fonctions

85
Cerbrus

La "nouvelle" façon de procéder depuis jQuery 1.5 (janvier 2011) consiste à utiliser des objets différés au lieu de transmettre un rappel success. Vous devriez retourner le résultat de $.ajax, puis utiliser les méthodes .done, .fail etc pour ajouter les rappels en dehors de $.ajax call.

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

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

getData().done(handleData);

Ceci découple la gestion des rappels de la manipulation AJAX, vous permet d'ajouter plusieurs rappels, des rappels d'échec, etc., sans avoir à jamais modifier la fonction getData() d'origine. Séparer la fonctionnalité AJAX de l'ensemble des actions à exécuter ultérieurement est ne bonne chose!.

Les différés permettent également une synchronisation beaucoup plus facile de plusieurs événements asynchrones, ce que vous ne pouvez pas facilement faire simplement avec success:

Par exemple, je pourrais ajouter plusieurs rappels, un gestionnaire d'erreurs et attendre qu'un minuteur se soit écoulé avant de continuer:

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

D'autres parties de jQuery utilisent également des objets différés: vous pouvez très facilement synchroniser des animations jQuery avec d'autres opérations asynchrones.

182
Alnitak

Je ne sais pas pourquoi vous définissez le paramètre en dehors du script. C'est inutile. Votre fonction de rappel sera appelée avec les données de retour en tant que paramètre automatiquement. Il est très possible de définir votre rappel en dehors du sucess: i.e.

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

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

la fonction handleData sera appelée et le paramètre lui sera transmis par la fonction ajax.

14
BinaryTox1n

Essayez de réécrire votre gestionnaire de réussite pour:

success : handleData

La propriété success de la méthode ajax nécessite uniquement une référence à une fonction.

Dans votre fonction handleData, vous pouvez prendre jusqu'à 3 paramètres:

object data
string textStatus
jqXHR jqXHR
6
Undefined

Je souhaiterai écrire :

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


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

après quelques heures, jouez avec et devenez presque ennuyeux. Le miracle m'est venu, ça marche.

<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>
2
Võ Minh

Vous n'avez pas besoin de déclarer la variable. La fonction de réussite Ajax prend automatiquement jusqu'à 3 paramètres: Function( Object data, String textStatus, jqXHR jqXHR )

1
Lukas Bijaminas