pasar parse json de ajax a jquery

Question

Hola tengo el siguiente código en ajax y lo que quiero es pasar las variables datox y datoy fuera del ajax así las tomo por jquery o javascript.

var datos = [];
        
           
           
            var action = "codigo";
            
            $.ajax({
                url: 'assets/js/mqtt/ajax.php',
                type: 'POST',
                async: false,
                data:{action:action,seleccion:seleccion},
                success:function(response){
                    var resultados = JSON.parse(response);
                    datosx = resultados.datox;
                    datosy = resultados.datoy;
                    
                },
                error:function(error){
                    console.log(error);
                }
            });
  // Aqui quiero mostrar los arreglos dentro de datosx y datos y
console.log(datosx);
console.log(datosy);

No tendría que haber ningún problema si manejas bien el 'scope', asegurate que las variables estén definidas de forma global (al menos fuera del ajax) — Alfredo Maussa, Aug 10 '21 at 02:39
Dada la respuesta de @A. cedano, corrijo. El Ajax no se ejecuta sequencialmente, por lo que muy probablemente la parte donde quieres mostrar los datos se ejecute antes que la obtención de los mismos, mostrando como resultado "undefined" o el valor que tenga antes de resolver el AJAX. Acá respondí una pregunta similar, puedes mirar el comportamiento asíncrono de peticiones a un servidor con AJAX [ [Salir de un for cuando se obtiene un GET 200 ok](https://es.stackoverflow.com/a/474131/170764) ] — Alfredo Maussa, Aug 10 '21 at 03:48
Esto ya se preguntó [aquí](https://es.stackoverflow.com/q/416192/54039) — Triby, Aug 10 '21 at 04:16

A. Cedano · Answer 1 · 2021-08-10T03:52:17.437

Las peticiones Ajax por definición son asíncronas, según MDN:

El término asíncrono se refiere al concepto de que más de una cosa ocurre al mismo tiempo, o múltiples cosas relacionadas ocurren sin esperar a que la previa se haya completado.

Es importante no perder de vista esto y considerar que muchas cosas ocurren en una petición Ajax (conexión a la red, recogida de datos, envío de datos, recepción de datos en el servidor, procesamiento de datos, respuesta al cliente, posibles errores, etc) y el orden / momento en que esas cosas ocurren no está pre-establecido.

Por otra parte, cuando hay una petición Ajax el código sigue su curso. Esto es así para que el hilo principal no se bloquee mientras la petición Ajax se completa, produciendo una pésima experiencia de usuario. Por eso, aunque puedes cambiar el comportamiento por defecto de Ajax mediante async: false no es recomendable hacerlo en ningún caso.

Para hacer lo que quieres y tener una petición Ajax que no bloquee el hilo principal, puedes hacerlo de dos maneras:

Manejar los datos dentro del bloque `success`

        $.ajax({
            url: 'assets/js/mqtt/ajax.php',
            type: 'POST',
            data:{action:action,seleccion:seleccion},
            success:function(response){
                var resultados = JSON.parse(response);
                datosx = resultados.datox;
                datosy = resultados.datoy;
                console.log(datosx);
                console.log(datosy);
                
            },
            error:function(error){
                console.log(error);
            }
        });

Definir una función que haga de callback

Creas una nueva función y la llamas desde dentro de success pasándole en parámetro la respuesta. En este caso es recomendable crear las variables dentro de la función, así pasas un solo parámetro que sería la respuesta:

        $.ajax({
            url: 'assets/js/mqtt/ajax.php',
            type: 'POST',
            data:{action:action,seleccion:seleccion},
            success:function(response){
                handleResponse( JSON.parse(response) );
            },
            error:function(error){
                console.log(error);
            }
        });

function handleResponse(resultados) {
    datosx = resultados.datox;
    datosy = resultados.datoy;
    console.log(datosx);
    console.log(datosy);
}

Aquí, handleResponse() será invocada sin ninguna duda cuando la petición Ajax haya terminado con éxito.

score 0 · Answer 2 · answered Aug 10 '21 at 04:04

Mejor usar done en vez de success. Con done te aseguras que la petición haya terminado y ahí ya puedes obtener los valores correctos. Quedaría así.

var datos = [];

var action = "codigo";

$.ajax({
    url: 'assets/js/mqtt/ajax.php',
    type: 'POST',
    async: false,
    data:{action:action,seleccion:seleccion},
    error:function(error){
        console.log(error);
    }
}).done(function(response){
    var resultados = JSON.parse(response);
    datosx = resultados.datox;
    datosy = resultados.datoy;

    // Aqui quiero mostrar los arreglos dentro de datosx y datos y
    console.log(datosx);
    console.log(datosy);
});

pasar parse json de ajax a jquery

2 Answers2

Manejar los datos dentro del bloque success

Definir una función que haga de callback

Manejar los datos dentro del bloque `success`