1

Estoy haciendo una petición AJAX que me retorna un json, y necesito usar los valores del json fuera de la función AJAX, ojala que los datos fueran publicos o globales, y no logro como hacerlo.

Este es mi codigo:

$('#btnBusca').on("click",function () {

    var cod_sec = $('#txtcodsec').val();
    var fecha = new Date;
    var ano = fecha.getFullYear();
    var mes = fecha.getMonth();
    var num;

    $.ajax({
        type: 'GET',
        data: {cod_sec: cod_sec,mes: mes, ano: ano},
        url: 'pagina.php',

        success: function (data) {
            var parsedData = JSON.parse(data);
            num = parsedData[0].NUMERO;


        },
        error: function () {
            alert('Error peticion Ajax ');
        }
    });
    alert(num);
});

Quiero usar el valor de la variable num fuera de la función $.ajax. ¿Alguna idea de como hacerlo?

1
  • 1
    Necesitas esperar a que tu operación asincrona finalice Commented el 15 sept. 2016 a las 15:21

5 respuestas 5

1

O simplemente puedes declarar la variable num fuera del evento click

var num;
$('#btnBusca').on("click",function () {

  var cod_sec = $('#txtcodsec').val();
  var fecha = new Date;
  var ano = fecha.getFullYear();
  var mes = fecha.getMonth();


  $.ajax({
      type: 'GET',
      data: {cod_sec: cod_sec,mes: mes, ano: ano},
      url: 'pagina.php',

      success: function (data) {
          var parsedData = JSON.parse(data);
          num = parsedData[0].NUMERO;
      },
      error: function () {
          alert('Error peticion Ajax ');
      }
  });
  alert(num);
});
1

Tu problema no es el acceso a la variable, tu problema es el momento en el que accedes, dado que la peticion ajax se ejecuta de manera asincrona, cuando consultas la variable num, aun no tiene asignado un valor.

$('#btnBusca').on("click",function () {

    var cod_sec = $('#txtcodsec').val();
    var fecha = new Date;
    var ano = fecha.getFullYear();
    var mes = fecha.getMonth();
    var num;

    $.ajax({
        type: 'GET',
        data: {cod_sec: cod_sec,mes: mes, ano: ano},
        url: 'pagina.php',

        success: function (data) {
            var parsedData = JSON.parse(data);
            num = parsedData[0].NUMERO;


        },
        error: function () {
            alert('Error peticion Ajax ');
        }
    }).done(function(){

       alert(num);
    });

});
2
  • gracias, funciona. Pero ahora como hago para usar la variable "num" en una nueva funcion fuera del ajax? Commented el 15 sept. 2016 a las 15:45
  • Las variables globales son generalmente una mala idea, pero puedes usar window.num = num; para guardarla global mente, e igual para acceder a ella alert(window.num); Commented el 15 sept. 2016 a las 15:48
1

Como ya te han comentado, JavaScript funciona de manera asíncrona, no secuencial como la mayoría de lenguajes de programación. Es por esta razón que se suelen usar muchos callbacks en este lenguaje.

En realidad, la petición AJAX que estás haciendo y el alert(num) se ejecutan en el mismo período de tiempo. Es por esto que el valor de num sea undefined.

Soluciones

Las soluciones no son tan amplias, pero la mayoría existentes nos servirá en un amplio rango de situaciones. Veamos algunas.

  1. Hacer una petición AJAX síncrona (tu peor alternativa): esta solución consiste simplemente en añadir la llave async con un valor false en los parámetros de la petición:

    let response = $.ajax({
        type: 'GET',
        url: 'destino',
        async: false
    }).responseText;
    // añadiendo la variable a window se hace global
    window.num = JSON.parse(response)[0];
    
  2. Usar un polyfill para hacer uso de futuras características del lenguaje: Con la ayuda de Babel podemos hacer uso de características futuras de JavaScript como lo es Async/Await por medio de este plugin:

    let response = await $.ajax({ /* ... */ });
    // o usando la API fetch
    let response = await fetch({
        method: 'GET',
        body: { ... },
        accept: 'application/json',
        'Content-Type': 'application/json'
    });
    

Namespaces

Usar variables globales es una mala idea. A medida que tu aplicación/web crece y añades librerías/frameworks, crece el riesgo de una colisión de variables, lo que aumenta el riesgo de un mal funcionamiento y una difícil depuración. Además, si se usan mal, podría desencadenar un memory leak.

Usar un namespace es una solución sencilla a este problema. Un namespace es un espacio en donde se almacena distintos datos relacionados entre sí (como en C#). En JavaScript no disponemos de ellos nativamente, pero podemos emularlos por medio de un objeto global que almacene en el datos relativos. Por ejemplo:

window.ventas = {
  desc: 0.25,
  iva: 0.18,
  hacerAlgo() {

  }
}

Aquí hemos creado un namespace que contiene valores e incluso una función que corresponden al namespace de ventas. Si bien lo agregamos al scope global, es mucho más limpio y seguro hacerlo de esta manera.

0

Lo que te está pasando es que cuando intentas acceder al valor de num aún no está disponible.

var ajax = function(cb) {
  $.ajax({
    type: 'GET',
    url: 'pagina.php',
    success: cb
  });
}

// callback para la llamada ajax
var callback = function(data, textStatus, xor) {
  var parsedData = JSON.parse(data);
  num = parsedData[0].NUMERO;
}

ajax(callback);
0

porque no intentas algo con un Promise de Javascript en jQuery. Acá te dejo una explicación de código.

// Declaras un Promise
var num = $.Deferred().promise(); 
//Ejecutamos el promise con el when, y solicitamos por el get la URL que vamos a consumir, cuando se ejecute este GET entonces pasamos dos functiones que es: Exito y Fallo
$.when($.get('http://jsonplaceholder.typicode.com/post/1')).then(exito,fallo);

function exito(data) {
   num = data;
   console.log("Tuvo éxito : " + num.userId);
 }
function fallo() {
   console.log("El promisse responde, no traje datos");
 };

//Con el metodo state(); puedes saber si tu promise aun este pendiente.
alert(num.state());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.