Renvoyer des données $ .get dans une fonction utilisant jQuery

Question

J'essaie d'appeler une fonction contenant du code jQuery. Je souhaite que cette fonction renvoie les résultats de l'instruction jQuery. Cela ne fonctionne pas et j'essaie de comprendre pourquoi.

function showGetResult (name) {
    var scriptURL = "somefile.php?name=" + name;
    return $.get(scriptURL, {}, function(data) { return data; });
}

alert (showGetResult("John"));

L'alerte affiche " [objet XMLHttpRequest] . " Cependant, si j’exécute jQuery seul, en dehors d’une fonction, cela fonctionne très bien - > $. get (scriptURL, {}, fonction (données) {alert (données);})

J'aimerais pouvoir réutiliser ce code en le plaçant dans une fonction qui renvoie les données $. get . Quelle erreur fondamentale est-ce que je fais ici?

Answer 1

Vous avez quelques erreurs différentes. Tout d'abord, $ .get ne renvoie pas la valeur de retour de la fonction de rappel. Il retourne l'objet XHR. Deuxièmement, la fonction get n'est pas synchrone, elle est asynchrone, donc showGetResult sera probablement renvoyé avant que l'opération ne soit terminée. Troisièmement, vous ne pouvez pas renvoyer quelque chose de l'intérieur du rappel vers l'étendue externe. Vous pouvez toutefois lier une variable dans la portée externe et la définir dans le rappel.

Pour obtenir la fonctionnalité souhaitée, vous devez utiliser $ .ajax et définir l'option async sur false. Vous pouvez ensuite définir une variable dans l'étendue externe et l'affecter dans le rappel ajax, en renvoyant cette variable à partir de la fonction.

function showGetResult( name )
{
     var result = null;
     var scriptUrl = "somefile.php?name=" + name;
     $.ajax({
        url: scriptUrl,
        type: 'get',
        dataType: 'html',
        async: false,
        success: function(data) {
            result = data;
        } 
     });
     return result;
}

Vous seriez probablement mieux servi, cependant, à trouver comment faire ce que vous voulez dans la fonction de rappel elle-même plutôt que de passer des appels asynchrones aux appels synchrones.

Answer 2

L’erreur fondamentale que vous commettez est que l’appel AJAX est passé de manière asynchrone. Ainsi, au moment de votre retour, le résultat n’est pas encore prêt. Pour que cela fonctionne, vous pouvez modifier votre code comme suit:

$(function() {
    showGetResult('John');
});

function showGetResult (name) {
    $.get('somefile.php', { 
        // Pass the name parameter in the data hash so that it gets properly
        // url encoded instead of concatenating it to the url.
        name: name 
    }, function(data) { 
        alert(data); 
    });
}

Answer 3

On dirait que vous voulez une demande synchrone: Comment puis-je obtenir jQuery pour exécuter une requête Ajax synchrone plutôt qu'asynchrone?

Ou vous pouvez souhaiter rappeler votre fonction:

function showGetResult (name, callback) {
  var scriptURL = "somefile.php?name=" + name;
  return $.get(scriptURL, {}, callback);
}

showGetResult("John", function(data){ alert(data); });

Answer 4

L’erreur fondamentale est "& as; asynchrone" une partie de AJAX. Comme vous ne savez pas combien de temps le serveur mettra pour envoyer une réponse, les méthodes AJAX ne "bloquent" jamais. - c’est-à-dire que vous n’appelez pas le serveur et attendez le résultat. Au lieu de cela, vous passez à autre chose, mais vous configurez une méthode, appelée "rappel", qui sera déclenchée lorsque les résultats seront renvoyés. Cette méthode est responsable de tout ce qui doit être fait avec les données (par exemple, en les injectant dans la page).

Answer 5

C'est la mauvaise façon de faire. La fonction (data) est une fonction de rappel. Par conséquent, chaque fois que return $ .get sera exécuté, il est possible que la fonction de rappel n'ait pas été appelée.

Mieux vous appelez vos données post get function à partir de la méthode function (data).

Answer 6

Une méthode efficace consiste à utiliser la méthode différée de jQuery, à la fois les requêtes sync / async au serveur et l'attente de deferred.resolve (), puis de renvoyer l'objet de promesse différée. Cela semble un peu fastidieux, mais une petite étude est certainement utile pour les données volumineuses. (La fonction de tvanfosson fonctionne bien dans ce cas, mais lorsque je travaillais sur des données d'analyse Google, une grande quantité d'informations m'a rendu fou et que je devais donc trouver cette solution.

     function showResults(name) { 
        var deferred = $.Deferred, requests = [];

        requests.push($.ajax({url:"/path/to/uri/?name=" + name, type: "GET", async: false}).done(function(d) { 
         //alert or process the results as you wish 
        }));
        $.when.apply(undefined, requests).then(function() { deferred.resolve(); }); 
        return deferred.promise();

    }

l'objet de promesse renvoyé peut également être utilisé avec $. when (showResults ('benjamin')). ??done (function () {}); pour les modifications ultérieures (comme les paramètres de graphique / graphique, etc.) ). totalement réutilisable. Vous pouvez également placer cette fonction dans une boucle de requêtes $ .deferred telles que,

        function updateResults() { 
             var deferred = $.Deferred, requests = [];
             requests.push($.ajax(url:"/path/to/names/?nameArr=" + jsonArrOfNames, type: "GET", async: false}).done(function(res) {  requests.push(showResults(res[0]));}) );
             $.when.apply($, requests).then(function() { deferred.resolve(); }); 
             return deferred.promise();
            }