Définition de la fonction de rappel du succès de l'ajax de jQuery

Question

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

Je veux placer la définition de la fonction de rappel du succès à l'extérieur de la fonction .ajax() bloc comme le suivant. Dois-je déclarer la variable dataFromServer comme suit pour que je puisse utiliser les données renvoyées par le callback de réussite ?

J'ai vu que la plupart des gens définissent le callback de réussite à l'intérieur de la fonction .ajax() bloc. Le code suivant est-il 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
}

Answer 1

La "nouvelle" façon de procéder depuis la version 1.5 de jQuery (janvier 2011) consiste à utiliser des objets différés au lieu de passer un fichier de type success le rappel. Vous devez retourner le résultat de $.ajax et ensuite utiliser le .done , .fail etc méthodes pour ajouter les callbacks en dehors de la $.ajax appelez .

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

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

getData().done(handleData);

Ce site découplage la gestion des rappels à partir de la gestion AJAX, vous permet d'ajouter plusieurs rappels, des rappels en cas d'échec, etc., sans jamais avoir à modifier le fichier d'origine. getData() fonction. Séparer la fonctionnalité AJAX de l'ensemble des actions à réaliser par la suite, c'est une bonne chose ! .

Les Deferreds permettent également une synchronisation beaucoup plus facile de plusieurs événements asynchrones, ce qui n'est pas facile à faire simplement avec success:

Par exemple, je pourrais ajouter plusieurs rappels, un gestionnaire d'erreurs et attendre qu'une minuterie s'écoule 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 les objets différés - vous pouvez synchroniser les animations jQuery avec d'autres opérations asynchrones très facilement avec eux.

Answer 2

Il suffit d'utiliser :

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

El success ne nécessite qu'une référence à une fonction, et transmet les données comme paramètre à cette fonction.

Vous pouvez accéder à votre handleData fonctionne comme ça à cause de la façon dont handleData JavaScript analysera votre code à la recherche de déclarations de fonctions avant de l'exécuter, ce qui vous permettra d'utiliser la fonction dans le code qui précède la déclaration réelle. C'est ce qu'on appelle levage .

Cela ne compte pas pour les fonctions déclarées de cette manière, cependant :

var myfunction = function(){}

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

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

Answer 3

Je ne sais pas pourquoi vous définissez le paramètre en dehors du script. C'est inutile. Votre fonction callback sera appelée avec les données de retour comme paramètre automatiquement. Il est tout à fait possible de définir votre callback en dehors de l'élément sucess: c'est-à-dire

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 passé par la fonction ajax.

Answer 4

Essayez de réécrire votre gestionnaire de succès pour :

success : handleData

La propriété "success" de la méthode ajax ne nécessite qu'une référence à une fonction.

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

object data
string textStatus
jqXHR jqXHR

Answer 5

J'écrirais :

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

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