javascript - retornar - jQuery: Devolver datos después del éxito de la llamada ajax

obtener datos ajax jquery

Question

Esta pregunta ya tiene una respuesta aquí:

• ¿Cómo devuelvo la respuesta de una llamada asíncrona? 31 respuestas

Tengo algo como esto, donde es una simple llamada a un script que me devuelve un valor, una cadena ...

function testAjax() {
    $.ajax({
      url: "getvalue.php",  
      success: function(data) {
         return data; 
      }
   });
}

pero si llamo algo como esto

var output = testAjax(svar);  // output will be undefined...

Entonces, ¿cómo puedo devolver el valor? El código de abajo tampoco parece funcionar ...

function testAjax() {
    $.ajax({
      url: "getvalue.php",  
      success: function(data) {

      }
   });
   return data; 
}

Answer 1

Consulte el ejemplo de documentos de jquery: http://api.jquery.com/jQuery.ajax/ (aproximadamente 2/3 de la página)

Puede que estés buscando el siguiente código:

    $.ajax({
     url: ''ajax/test.html'',
     success: function(data) {
     $(''.result'').html(data);
     alert(''Load was performed.'');
   }
});

Misma página ... más abajo.

Answer 2

Id, si ustedes lo resolvieron, pero les recomiendo otra forma de hacerlo, y funciona :)

    ServiceUtil = ig.Class.extend({
        base_url : ''someurl'',

        sendRequest: function(request)
        {
            var url = this.base_url + request;
            var requestVar = new XMLHttpRequest();
            dataGet = false;

            $.ajax({
                url: url,
                async: false,
                type: "get",
                success: function(data){
                    ServiceUtil.objDataReturned = data;
                }
            });
            return ServiceUtil.objDataReturned;                
        }
    })

Entonces, la idea principal aquí es que, al agregar async: false, se hace todo lo que espera hasta que se recuperan los datos. Luego lo asignas a una variable estática de la clase, y todo funciona mágicamente :)

Answer 3

La única forma de devolver los datos de la función sería hacer una llamada sincrónica en lugar de una llamada asíncrona, pero eso congelaría el navegador mientras esperaba la respuesta.

Puedes pasar una función de devolución de llamada que maneja el resultado:

function testAjax(handleData) {
  $.ajax({
    url:"getvalue.php",  
    success:function(data) {
      handleData(data); 
    }
  });
}

Llámalo así:

testAjax(function(output){
  // here you use the output
});
// Note: the call won''t wait for the result,
// so it will continue with the code here while waiting.

Answer 4

puede agregar la opción asíncrona a falso y regresar fuera de la llamada ajax.

function testAjax() {
    var result="";
    $.ajax({
      url:"getvalue.php",
      async: false,  
      success:function(data) {
         result = data; 
      }
   });
   return result;
}

Answer 5

Nota: Esta respuesta fue escrita en febrero de 2010.
Ver actualizaciones de 2015, 2016 y 2017 en la parte inferior.

No se puede devolver nada de una función que es asíncrona. Lo que puedes devolver es una promesa . Expliqué cómo funcionan las promesas en jQuery en mis respuestas a esas preguntas:

• Función de JavaScript que devuelve datos de llamada AJAX
• jQuery jqXHR - cancela llamadas encadenadas, desencadena cadena de errores

Si pudiera explicar por qué quiere devolver los datos y qué quiere hacer con ellos más adelante, entonces podría darle una respuesta más específica sobre cómo hacerlo.

Generalmente, en lugar de:

function testAjax() {
  $.ajax({
    url: "getvalue.php",  
    success: function(data) {
      return data; 
    }
  });
}

Puedes escribir tu función testAjax así:

function testAjax() {
  return $.ajax({
      url: "getvalue.php"
  });
}

Entonces puedes obtener tu promesa así:

var promise = testAjax();

Puede almacenar su promesa, puede pasarla, puede usarla como un argumento en llamadas a funciones y puede devolverla desde funciones, pero cuando finalmente quiera usar los datos que devuelve la llamada AJAX, debe: Hazlo asi:

promise.success(function (data) {
  alert(data);
});

(Ver actualizaciones a continuación para la sintaxis simplificada.)

Si sus datos están disponibles en este punto, esta función se invocará de inmediato. Si no es así, se invocará tan pronto como los datos estén disponibles.

El objetivo de hacer todo esto es que sus datos no están disponibles inmediatamente después de la llamada a $ .ajax porque son asíncronos. Promises es una buena abstracción para que las funciones digan: no puedo devolverte los datos porque aún no los tengo, no quiero bloquearlos y hacerte esperar, así que aquí hay una promesa y podrás Utilícelo más tarde, o simplemente para dárselo a alguien más y terminar con él.

Ver esta DEMO .

ACTUALIZACIÓN (2015)

Actualmente (a partir de marzo de 2015) jQuery Promises no es compatible con la especificación Promises / A +, lo que significa que no pueden cooperar muy bien con otras implementaciones conformes con Promises / A + .

Sin embargo, jQuery Promises en la próxima versión 3.x será compatible con la especificación Promises / A + (gracias a Benjamin Gruenbaum por señalarlo). Actualmente (a partir de mayo de 2015) las versiones estables de jQuery son 1.xy 2.x.

Lo que expliqué anteriormente (en marzo de 2011) es una forma de usar los Objetos Aplazados de jQuery para hacer algo asincrónicamente que en código síncrono se lograría devolviendo un valor.

Pero una llamada de función síncrona puede hacer dos cosas: puede devolver un valor (si puede) o lanzar una excepción (si no puede devolver un valor). Promises / A + aborda ambos casos de uso de una manera que es tan poderosa como el manejo de excepciones en código síncrono. La versión jQuery maneja el equivalente de devolver un valor bien, pero el equivalente al manejo complejo de excepciones es algo problemático.

En particular, el punto principal de la gestión de excepciones en el código síncrono no es solo renunciar a un buen mensaje, sino tratar de solucionar el problema y continuar con la ejecución, o posiblemente volver a generar la misma excepción o una excepción diferente para algunas otras partes del programa. encargarse de. En código síncrono tienes una pila de llamadas. En las llamadas asíncronas, el manejo avanzado de excepciones dentro de sus promesas, tal como lo exige la especificación Promises / A +, realmente puede ayudarlo a escribir código que maneje errores y excepciones de manera significativa incluso en casos de uso complejos.

Para conocer las diferencias entre jQuery y otras implementaciones, y cómo convertir las promesas de jQuery en el cumplimiento de Promises / A +, consulte Coming from jQuery por Kris Kowal et al. en la wiki de la biblioteca Q y las promesas llegan a JavaScript por Jake Archibald en HTML5 Rocks.

Cómo devolver una promesa real

La función de mi ejemplo anterior:

function testAjax() {
  return $.ajax({
      url: "getvalue.php"
  });
}

devuelve un objeto jqXHR, que es un objeto diferido jQuery.

Para hacer que se vuelva una promesa real, puede cambiarla a - usando el método de la wiki de Q :

function testAjax() {
  return Q($.ajax({
      url: "getvalue.php"
  }));
}

o, usando el método del artículo HTML5 Rocks :

function testAjax() {
  return Promise.resolve($.ajax({
      url: "getvalue.php"
  }));
}

Este Promise.resolve($.ajax(...)) también es lo que se explica en la documentación del módulo de promise y debería funcionar con ES6 Promise.resolve() .

Para usar las promesas de ES6 hoy, puede usar polyfill() del módulo es6-promise de Jake Archibald.

Para ver dónde puede usar las promesas de ES6 sin el polyfill, vea: ¿Puedo usar: promesas ?

Para más información ver:

• http://bugs.jquery.com/ticket/14510
• https://github.com/jquery/jquery/issues/1722
• https://gist.github.com/domenic/3889970
• http://promises-aplus.github.io/promises-spec/
• http://www.html5rocks.com/en/tutorials/es6/promises/

Futuro de jQuery

Las versiones futuras de jQuery (a partir de 3.x - las versiones estables actuales a partir de mayo de 2015 son 1.xy 2.x) serán compatibles con la especificación Promises / A + (gracias a Benjamin Gruenbaum por señalarlo en los comentarios). "Dos cambios que ya hemos decidido son la compatibilidad con Promise / A + para nuestra implementación diferida [...]" ( jQuery 3.0 y el futuro del desarrollo web ). Para obtener más información, consulte: jQuery 3.0: The Next Generations de Dave Methvin y jQuery 3.0: Más interoperabilidad, menos Internet Explorer de Paul Krill.

Charlas interesantes

• Boom, Promises / A + Nació de Domenic Denicola (JSConfUS 2013)
• Redemption from Callback Hell por Michael Jackson y Domenic Denicola (HTML5DevConf 2013)
• Promesas de JavaScript de David M. Lee (noviembre de 2014)

ACTUALIZACIÓN (2016)

Hay una nueva sintaxis en ECMA-262, 6ª Edición, Sección 14.2, llamadas funciones de flecha que pueden usarse para simplificar aún más los ejemplos anteriores.

Usando la API de jQuery, en lugar de:

promise.success(function (data) {
  alert(data);
});

puedes escribir:

promise.success(data => alert(data));

o usando las promesas / A + API:

promise.then(data => alert(data));

Recuerde usar siempre los controladores de rechazo con:

promise.then(data => alert(data), error => alert(error));

o con:

promise.then(data => alert(data)).catch(error => alert(error));

Vea esta respuesta para ver por qué siempre debe usar los controladores de rechazo con promesas:

• ¿Debo abstenerme de manejar el rechazo de Promesa de forma asíncrona?

Por supuesto, en este ejemplo, podría usar justa promise.then(alert) porque solo está llamando a alert con los mismos argumentos que su devolución de llamada, pero la sintaxis de la flecha es más general y le permite escribir cosas como:

promise.then(data => alert("x is " + data.x));

No todos los navegadores admiten esta sintaxis todavía, pero hay ciertos casos en los que estás seguro de en qué navegador se ejecutará tu código, por ejemplo, al escribir una extensión de Chrome , un complemento de Firefox o una aplicación de escritorio con Electron, NW.js o AppJS (ver esta respuesta para más detalles).

Para el soporte de funciones de flecha, ver:

• http://caniuse.com/#feat=arrow-functions
• http://kangax.github.io/compat-table/es6/#test-arrow_functions

ACTUALIZACIÓN (2017)

Ahora hay una sintaxis aún más nueva llamada funciones asíncronas con una nueva palabra clave de await que en lugar de este código:

functionReturningPromise()
    .then(data => console.log(''Data:'', data))
    .catch(error => console.log(''Error:'', error));

te permite escribir:

try {
    let data = await functionReturningPromise();
    console.log(''Data:'', data);
} catch (error) {
    console.log(''Error:'', error);
}

Solo puede usarlo dentro de una función creada con la palabra clave async . Para más información, ver:

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/await

Para soporte en los navegadores, ver:

• http://caniuse.com/async-functions

Para soporte en Nodo, ver:

• http://node.green/#ES2017-features-async-functions

En lugares donde no tienes soporte nativo para async y await puedes usar Babel:

• https://babeljs.io/docs/plugins/transform-async-to-generator/

o con una sintaxis ligeramente diferente, un enfoque basado en generador como en co o Bluebird coroutines:

• https://www.npmjs.com/package/co
• http://bluebirdjs.com/docs/api/promise.coroutine.html

Más información

Algunas otras preguntas sobre promesas para más detalles:

• llamada de promesa separada de la resolución de promesa
• Q Promesa demora
• Devolver el resultado de la promesa en lugar de la promesa
• Módulo exportador del resultado prometido.
• ¿Qué hay de malo en resolver la promesa?
• Valor de retorno en función de un bloque de promesa
• ¿Cómo puedo devolver el estado dentro de la promesa?
• ¿Debo abstenerme de manejar el rechazo de Promesa de forma asíncrona?
• ¿Es el concepto de aplazamiento / promesa en JavaScript uno nuevo o es una parte tradicional de la programación funcional?
• ¿Cómo puedo encadenar estas funciones con promesas?
• Promise.all en JavaScript: ¿Cómo obtener valor de resolución para todas las promesas?
• Por qué Promise.all está indefinido
• La función devolverá nulo desde javascript post / get
• Use cancel () dentro de una cadena creada por promisifyAll
• ¿Por qué es posible pasar un parámetro no funcional a Promise.then () sin causar un error?
• Implementar el patrón de promesas.
• Promesas y desempeño.
• Problemas al raspar dos URL con promesas
• http.request no devuelve datos incluso después de especificar el retorno en el evento ''final''
• async.each no itera al usar promesas
• jQuery jqXHR - cancela llamadas encadenadas, desencadena cadena de errores
• Manera correcta de manejo de promesas y respuesta del servidor.
• ¿Devuelve un valor de una llamada de función antes de completar todas las operaciones dentro de la función en sí?
• Resolviendo un setTimeout dentro del punto final de la API
• Async espera una función
• Función de JavaScript que devuelve datos de llamada AJAX
• Bloques try / catch con async / await
• jQuery Deferred no llama a los callbacks resueltos / hechos en orden
• Devolver datos de resultados ajax en un objeto extraño
• javascript: ¿Por qué hay una especificación para los módulos de sincronización y asíncrono?