Quiero usar jQuery ajax para recuperar datos de un servidor.
Quiero poner la definición de la función de devolución de llamada exitosa fuera del .ajax()
bloque como se muestra a continuación. Entonces, ¿necesito declarar la variable de dataFromServer
la siguiente manera para poder utilizar los datos devueltos de la devolución de llamada exitosa?
He visto a la mayoría de la gente definir la devolución de llamada exitosa dentro del .ajax()
bloque. Entonces, ¿es correcto el siguiente código si quiero definir la devolución de llamada exitosa afuera?
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
}
fuente
deferred objects
cosa? No lo había visto antes. Además, parece un poco complicado, ya que el código que define qué devolución de llamada usar está en una ubicación diferente a la llamada AJAX real.success:
. ¡Desacoplar la devolución de llamada del AJAX es algo bueno ! Vea las notas que acabo de agregar al final de mi respuesta.$.get()
por ejemplo, habría sido imposible agregar unerror:
controlador porque$.get
no lo admite. Sin embargo, puede agregar un.fail
al resultado diferido de$.get
.La "nueva" forma de hacer esto desde jQuery 1.5 (enero de 2011) es usar objetos diferidos en lugar de pasar una
success
devolución de llamada. Debe devolver el resultado de$.ajax
y luego usar los métodos.done
,.fail
etc. para agregar las devoluciones de$.ajax
llamada fuera de la llamada .function getData() { return $.ajax({ url : 'example.com', type: 'GET' }); } function handleData(data /* , textStatus, jqXHR */ ) { alert(data); //do some stuff } getData().done(handleData);
Esto desacopla el manejo de devolución de llamada del manejo de AJAX, le permite agregar múltiples devoluciones de llamada, devoluciones de llamada fallidas, etc., todo sin necesidad de modificar la
getData()
función original . ¡Separar la funcionalidad AJAX del conjunto de acciones que se completarán después es algo bueno! .Los diferidos también permiten una sincronización mucho más fácil de múltiples eventos asincrónicos, lo que no se puede hacer fácilmente solo con
success:
Por ejemplo, podría agregar múltiples devoluciones de llamada, un controlador de errores y esperar a que transcurra un temporizador antes de continuar:
// 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 });
Otras partes de jQuery también usan objetos diferidos: puede sincronizar las animaciones de jQuery con otras operaciones asíncronas muy fácilmente con ellas.
fuente
success:
porque deferreds simplemente funcionan mucho mejor.user:6782 deferred
para muchas más ejemplos.alert
sin embargo ... Yo personalmente usaríaconsole.log(data)
o si es una matriz:console.table(data)
:)No sé por qué está definiendo el parámetro fuera del script. Eso es innecesario. Su función de devolución de llamada se llamará con los datos de retorno como parámetro automáticamente. Es muy posible definir su devolución de llamada fuera del
sucess:
iefunction getData() { $.ajax({ url : 'example.com', type: 'GET', success : handleData }) } function handleData(data) { alert(data); //do some stuff }
se llamará a la función handleData y la función ajax le pasará el parámetro.
fuente
Intente reescribir su controlador de éxito para:
La propiedad de éxito del método ajax solo requiere una referencia a una función.
En su función handleData puede tomar hasta 3 parámetros:
fuente
Yo escribiría :
var handleData = function (data) { alert(data); //do some stuff } function getData() { $.ajax({ url : 'example.com', type: 'GET', success : handleData }) }
fuente
dataFromServer
por lo que la primera línea se puede eliminar.No es necesario declarar la variable. La función de éxito de Ajax toma automáticamente hasta 3 parámetros:
Function( Object data, String textStatus, jqXHR jqXHR )
fuente
después de unas horas juega con él y casi se vuelve aburrido. El milagro vino a mí, funciona.
<pre> var listname = []; $.ajax({ url : wedding, // change to your local url, this not work with absolute url success: function (data) { callback(data); } }); function callback(data) { $(data).find("a").attr("href", function (i, val) { if( val.match(/\.(jpe?g|png|gif)$/) ) { // $('#displayImage1').append( "<img src='" + wedding + val +"'>" ); listname.push(val); } }); } function myfunction() { alert (listname); } </pre>
fuente
success : callback
jquery activará su función llamadacallback
con eldata
parámetro en ella.En su componente, es decir, código JS angular:
function getData(){ window.location.href = 'http://localhost:1036/api/Employee/GetExcelData'; }
fuente