¿Como recoger la respuesta de una llamada ajax?

Question

Me gustaría recoger la respuesta de la siguiente llamada ajax:

function prueba(callback){

       $.ajax({
            url: '/services/traps/view/',
            type: "POST",
            data: {
                csrfmiddlewaretoken: csrftoken
            },
            success: callback ,
            error: function(qXHR, textStatus, errorThrown) {
                console.log(errorThrown);
                console.log(qXHR);
                console.log(textStatus);

            },
        });
    };

function mycallback(data){
  //mi código
};

var mydata = prueba(mycallback);

En este caso, mydata devuelve undefinded. Quiero recogerla para manipularla después con jquery.

Answer 1

Hay varios problemas en el código por los que vas a obtener undefined en la variable mydata:

1. La función prueba no devuelve nada

   Estás asignando a mydata el valor de la función prueba... pero prueba no devuelve nada, por lo que mydata será siempre undefined.

2. Quieres realizar una asignación síncrona de un valor asíncrono

   Éste es el verdadero problema. La función AJAX se ejecuta de manera asíncrona (se realiza la llamada al servidor y se ejecuta success/error cuando vuelve la respuesta) pero la asignación es síncrona; por lo tanto, incluso si prueba devolviera un valor, no funcionaría porque ese valor aún no se habría asignado antes de devolverlo.

Posibles soluciones: puedes cambiar la función para que devuelva un valor y realizar la llamada AJAX de manera síncrona (haciendo async:false). De esta manera te aseguras de que el valor sí estará ahí cuando lo devuelvas. Esta opción no es la mejor y no es la recomendada.

Otra alternativa mejor sería empaquetar el código que haga uso de la variable mydata en una función y llamarla en mycallback (donde se asigna el valor de mydata):

function prueba(callback){

       $.ajax({
            url: '/services/traps/view/',
            type: "POST",
            data: {
                csrfmiddlewaretoken: csrftoken
            },
            success: callback ,
            error: function(qXHR, textStatus, errorThrown) {
                console.log(errorThrown);
                console.log(qXHR);
                console.log(textStatus);

            },
        });
    };

function mycallback(data){
  //mi código
  mydata = data;
  operacionesConMyData();
};

function operacionesConMyData() {
    // mover aqui las operaciones que necesiten mydata
}

// llamada al AJAX
prueba(mycallback);

Answer 2

Sin utilizar callback. podes tomar el valor del retorno en el success

function prueba(callback){

       $.ajax({
            url: '/services/traps/view/',
            type: "POST",
            data: {
                csrfmiddlewaretoken: csrftoken
            },
            success: function (retorno) {
          // El retorno contendra la información 

        },
            error: function(qXHR, textStatus, errorThrown) {
                console.log(errorThrown);
                console.log(qXHR);
                console.log(textStatus);

            },
        });
    };