Devuelve datos $ .get en una función usando jQuery

Question

Estoy tratando de llamar a una función que contiene código jQuery. Quiero que esta función devuelva los resultados de la declaración jQuery. No está funcionando, y estoy tratando de averiguar por qué.

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

alert (showGetResult("John"));

La alerta muestra " [object XMLHttpRequest] . " Sin embargo, si ejecuto la declaración jQuery sola, fuera de una función, funciona bien - > $ .get (scriptURL, {}, function (data) {alert (data);})

Me gustaría poder reutilizar este código colocándolo dentro de una función que devuelve los datos $ .get . ¿Qué error fundamental estoy cometiendo aquí?

Answer 1

Tienes algunos errores diferentes. Primero, $ .get no devuelve el valor de retorno de la función de devolución de llamada. Devuelve el objeto XHR. En segundo lugar, la función get no es síncrona, es asíncrona, por lo que showGetResult probablemente volverá antes de que se complete. En tercer lugar, no puede devolver algo desde el interior de la devolución de llamada al ámbito externo. Sin embargo, puede vincular una variable en el ámbito externo y establecerla en la devolución de llamada.

Para obtener la funcionalidad que desea, deberá usar $ .ajax y establecer la opción asíncrona en falso. Luego puede definir una variable en el ámbito externo y asignarla en la devolución de llamada ajax, devolviendo esta variable desde la función.

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

Sin embargo, es probable que le sirva mejor descubrir cómo hacer lo que quiere en la función de devolución de llamada en lugar de cambiar de llamadas asíncronas a síncronas.

Answer 2

El error fundamental que está cometiendo es que la llamada AJAX se realiza de forma asincrónica, por lo que para cuando regrese, el resultado aún no está listo. Para que esto funcione, puede modificar su código de esta manera:

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

Parece que desea una solicitud sincrónica: ¿Cómo puedo obtener jQuery para realizar una solicitud Ajax sincrónica, en lugar de asincrónica?

O, es posible que desee pasar la devolución de llamada a su función:

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

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

Answer 4

El error fundamental es el "asíncrono" parte de AJAX. Como no sabe cuánto tiempo tardará el servidor en devolver una respuesta, los métodos AJAX nunca "bloquean". - es decir, no llamas al servidor y simplemente te sientas allí esperando el resultado. En cambio, pasa a otra cosa, pero configura un método, llamado "devolución de llamada", que se activará cuando vuelvan los resultados. Este método es responsable de hacer lo que sea necesario con los datos (por ejemplo, inyectarlos en la página).

Answer 5

Esta es la forma incorrecta de hacerlo. La función (datos) es una función de devolución de llamada, por lo que siempre que se ejecute return $ .get ... existe la posibilidad de que no se haya llamado a la función de devolución de llamada.

Mejor llame a su función de obtención de datos de publicación desde el método de función (datos).

Answer 6

Una forma eficiente es usar el método diferido de jQuery, tanto las solicitudes de sincronización / asíncrono al servidor como esperar deferred.resolve () y luego devolver el objeto de promesa diferida. Parece un poco tedioso, pero un pequeño estudio es útil para grandes datos. (La función de tvanfosson funciona bien en este caso, pero cuando estaba trabajando en datos de Google Analytics, una gran cantidad de información me volvió loco y, por lo tanto, necesito encontrar esta solución)

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

    }

el objeto de promesa devuelto también se puede usar con $ .when (showResults ('benjamin')). ??done (function () {}); para modificaciones posteriores (como la configuración del gráfico / gráfico, etc. ) Totalmente reutilizable. También puede colocar esta función en un bucle de solicitudes $. Diferidas como,

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