problemas al ejecutar una llamada jquery ajax dentro de una función

Question

Me gustaría poner una llamada ajax dentro de una función ya que la utilizo repetidamente en varias ubicaciones. Quiero una versión manipulada de la respuesta devuelta. Esto es lo que estoy tratando de hacer (muy simplificado).

a = getAjax(); 
$('body').append('<div>'+a+'</div>'); 
function getAjax() { 
    $.ajax({ 
    type: "GET", 
    url: 'someURL', 
    success: function(response) { 
    return response; 
    }); 
} 

Lo que sucede, sin embargo, es que la función de agregación se está ejecutando antes "a" se ha definido en la función getAjax. ¿Alguna idea?

Answer 1

Hay dos maneras de taggle esto. una es utilizar la devolución de llamada de éxito:

$.ajax({ 
    type: "GET", 
    url: 'someURL', 
    success: function(response) { 
    AppendResponse(response); 
    }); 

el otro es para establecer asíncrono en false http://api.jquery.com/jQuery.ajax/:

var a; 
getAjax(); 
$('body').append('<div>'+a+'</div>'); 
function getAjax() { 
    $.ajax({ 
    type: "GET", 
    url: 'someURL', 
    async: false, 
    success: function(response) { 
    a = response; 
    }); 
} 

Nota importante en la no asincrónico:

solicitudes entre dominios y tipo de datos: " Las solicitudes jsonp "no admiten operaciones sincrónicas.

Answer 2

AJAX es asincrónico. Esto significa que el código en el controlador de éxito se retrasa hasta que la solicitud sea exitosa, mientras que el resto del código continúa normalmente. Es necesario poner el código correspondiente en el controlador éxito AJAX:

getAjax(); 
function getAjax() { 
    $.ajax({ 
    type: "GET", 
    url: 'someURL', 
    success: function(response) { 
    $(document.body).append('<div>'+response+'</div>'); 
    }); 
} 

Tenga en cuenta que también he optimizado su selector de body utilizando el Javascript nativo document.body en lugar de utilizar el selector de etiquetas estándar.

---

Editar versión de devolución de llamada

function getAjax(callback) { 
    $.ajax({ 
     type: 'GET', 
     url: 'someURL', 
     success: callback 
    }); 
} 

Ahora puede hacer el código en línea utilizando una función de devolución de llamada:

getAjax(function(response) { 
    $(document.body).append('<div>'+response+'</div>'); 
}); 

o

getAjax(function(response) { 
    alert(response); 
}); 

o lo que sea.

El código dentro de la llamada de función anónima se procesará cuando se complete la solicitud AJAX.

Answer 3

¿Por qué no devuelve la respuesta a otra función en la exitosa devolución de llamada? Esto debe manejar su necesidad de respuestas diferentes:

getAjax(); 
function getAjax() { 
    $.ajax({ 
    type: "GET", 
    url: 'someURL', 
    success: function(response) { 
    AppendResponse(response); 
    }); 
} 

function AppendResponse(response) { 
$('body').append('<div>'+response+'</div>'); 
} 

Answer 4

Una sugerencia que tengo es pasar un disparador para el comando que desea ejecutar en la función de AJAX de forma que se ejecutará después de AJAX ha recibido una respuesta-

a = getAjax(); 
function getAjax() { 
    $.ajax({ 
    type: "GET", 
    url: 'someURL', 
    success: function(response) { 
    inputText(response); 
    }); 
} 

inputText(someText) { 
$(document.body).append('<div>'+ someText +'</div>'); 
} 

de esta manera se puede crear si declaraciones/otras alternativas para seguir utilizando el mismo comando AJAX para diferentes resultados