Restituisce $ .get dati in una funzione usando jQuery

Question

Sto provando a chiamare una funzione che contiene il codice jQuery. Voglio che questa funzione restituisca i risultati dell'istruzione jQuery. Non funziona e sto cercando di capire perché.

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

alert (showGetResult("John"));

L'avviso visualizza " [oggetto XMLHttpRequest] . " Tuttavia, se eseguo l'istruzione jQuery da sola, al di fuori di una funzione, funziona benissimo - > $ .get (scriptURL, {}, function (data) {alert (data);})

Vorrei poter riutilizzare questo codice inserendolo in una funzione che restituisce i dati $ .get . Quale errore fondamentale sto facendo qui?

Answer 1

Hai qualche errore diverso. Innanzitutto, $ .get non restituisce il valore restituito della funzione di callback. Restituisce l'oggetto XHR. In secondo luogo, la funzione get non è sincrona, è asincrona, quindi showGetResult probabilmente ritornerà prima del completamento. Terzo, non è possibile restituire qualcosa dall'interno del callback all'ambito esterno. Tuttavia, è possibile associare una variabile nell'ambito esterno e impostarla nel callback.

Per ottenere la funzionalità desiderata, è necessario utilizzare $ .ajax e impostare l'opzione asincrona su false. Quindi è possibile definire una variabile nell'ambito esterno e assegnarla nel callback ajax, restituendo questa variabile dalla funzione.

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

Probabilmente saresti meglio servito, però, a capire come fare quello che vuoi nella stessa funzione di callback piuttosto che passare da chiamate asincrone a sincrone.

Answer 2

L'errore fondamentale che stai commettendo è che la chiamata AJAX è fatta in modo asincrono, quindi al tuo ritorno il risultato non è ancora pronto. Per farlo funzionare puoi modificare il tuo codice in questo modo:

$(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

Sembra che tu voglia una richiesta sincrona: Come posso ottenere jQuery per eseguire una richiesta Ajax sincrona anziché asincrona?

Oppure, potresti voler passare il callback alla tua funzione:

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

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

Answer 4

L'errore fondamentale è il "quotato asincrono" parte di AJAX. Poiché non sai quanto tempo impiegherà il server a inviare una risposta, i metodi AJAX non "bloccano mai". - cioè, non chiami il server e ti siedi lì in attesa del risultato. Invece, si passa a qualcos'altro, ma si imposta un metodo, chiamato "callback", che si attiverà quando i risultati torneranno. Questo metodo è responsabile di fare tutto ciò che deve essere fatto con i dati (ad es. Iniettarli nella pagina).

Answer 5

Questo è il modo sbagliato di fare. La funzione (dati) è una funzione di richiamata, quindi ogni volta che return $ .get verrà eseguito .. è possibile che la funzione di richiamata non sia stata chiamata.

Meglio chiamare i tuoi dati post ottenere la funzione dal metodo function (data).

Answer 6

Un modo efficace è usare il metodo Deferred di jQuery, sia sincronizzare / asincrare le richieste al server sia attendere deferred.resolve () e quindi restituire l'oggetto promesso differito. Sembra un po 'noioso, ma un piccolo studio è sicuramente utile per dati di grandi dimensioni. (la funzione di tvanfosson funziona bene in questo caso, ma quando stavo lavorando su dati analitici di google, una grande quantità di informazioni mi ha fatto impazzire e quindi ho bisogno di trovare questa soluzione)

     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'oggetto promesso restituito può anche essere usato con $ .when (showResults ('benjamin')). ??done (function () {}); per le modifiche post (come impostazioni di grafici / grafici ecc. ). totalmente riutilizzabile. Puoi anche inserire questa funzione in un ciclo di $ .deferred richieste come,

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