0

Busco la manera de ejecutar una segunda consulta ajax de jQuery con un dato recuperado de la primera consulta, por ejemplo:

Ingreso el número de documento que quiero consultar y al hacer click en el botón, muestra el color guardado en base de datos para ese usuario.

$(".botonConsulta").click(function(){
  //Capturo el número de documento de un input
  var documento = $('.documento');

  var datos = new FormData();
  datos.append('documento', documento);

  $.ajax({
    url: 'ruta/archivo.php',
    method: 'POST',
    data: datos,
    dataType: 'json',
    success: function(respuesta){
      //Muestro en pantalla el color guardado para ese usuario
      $('.colorSeleccionado').html(respuesta['color']);
    }
  })
}

Esta consulta muestra, digamos, el color "Verde"... Ahora, con ese color, necesito crear la segunda consulta ajax para traer todos los datos del color Verde de la tabla colores.

Intenté con promise pero muestra false en consola:

$(".botonConsulta").click(function(){
  //Capturo el número de documento de un input
  var documento = $('.documento');

  var datos = new FormData();
  datos.append('documento', documento);

  var promesa = $.ajax({
    url: 'ruta/archivo.php',
    method: 'POST',
    data: datos,
    dataType: 'json',
    success: function(respuesta){
      //Muestro en pantalla el color guardado para ese usuario
      $('.colorSeleccionado').html(respuesta['color']);
    }
  })
  $promesa.done(function(respuesta){
   var color= respuesta['color'];
   console.log(color) //Muestra en consola "Verde"

   var info = new FormData();
   info.append('color', color);

   $.ajax({
     url: 'ruta/archivo.php',
     method: 'POST',
     data: info,
     dataType: 'json',
     success: function(respuesta){
      console.log(respuesta) //Muestra en consola "False"
    }
  })
 });       
})

Cabe aclarar que aún no comprendo completamente el uso de promise, no se si lo estoy implementando bien.

Cómo puedo ejecutar el segundo ajax para que muestre los valores de la tabla colores con el color devuelto en la primera consulta?

3 respuestas 3

0

declaracion new Promise() y te falta agregar promise.resolve().

mipromesa = new Promise(function(resolve, reject) {
$.ajax(
......
.......
  success: function(respuesta){
      //Muestro en pantalla el color guardado para ese usuario
      $('.colorSeleccionado').html(respuesta['color']);
      promise.resolve("completado");// se resulve la promera y se llama otra funcion
    }
  })
mipromesa.done(function(resultado){
//codigo
alert(resultado);
})

utilizando then() en vez de funcion luego de resolver la promesa

promise.then(function(exito){
   // nuevo ajax 
})

otras formas de hacerlo:

utilizando callbacks

function ajax(url,datos,cb){
  .......
  ........
  success: function(respuesta){
      cb(respuesta) //se llama al callback
    }

}
ajax("http://example.com",{'documento': documento},function(respuesta){
  ajax("http://example.com",{'documento': documento},function(respuesta){
    //codigo
  }
})

con la api fecth. donde then seria como luego mas limpio que utilizar promesas o callbacks

function ajax(url,datos){
 fetch('http://example.com')
  .then(function(response) { 
    return response.json(); // retona los datos en json
  })
  .then(function(myJson) {
    console.log(myJson); // siguiente llamado a la funcion
  })
 .catch(function(error) {
   console.log('Hubo un problema con la petición Fetch:' + error.message);
 });
}

utilizando async y await.

ahora un ejemplo con todo:

async function ajax() {

  let promise = new Promise((resolve, reject) => {
    setTimeout(() => resolve("done!"), 1000)
  });

  let result = await promise; // espera hasta que se resuelva
}

ajax().then(function(){
 alert("se completo la ejecucion")
});
0

asi seria con promise

function req1(){
  return new Promise ( (resolver,rechazar) => {
    var documento = $('.documento');

    var datos = new FormData();
    datos.append('documento', documento);

    $.ajax({
    url: 'ruta/archivo.php',
    method: 'POST',
    data: datos,
    dataType: 'json',
    success: function(respuesta){
      //Muestro en pantalla el color guardado para ese usuario
      $('.colorSeleccionado').html(respuesta['color']);
      resolver(respuesta); // AQUI VA EL RESOLVER

    },
    error:function(err){
      rechazar(err);
    }
  })
  });
}

asi seria el request dependiente

function req2(respTemp){
   var info = new FormData();

   info.append('color', respTemp['color']);

   $.ajax({
     url: 'ruta/archivo.php',
     method: 'POST',
     data: info,
     dataType: 'json',
     success: function(respuesta){
      console.log(respuesta) //Deberia mostrar la respuesta que retorne archivo.php
    }
  })
}

y las unes asi

req1().then( (rslt) => {
  req2(rslt);
}).catch( (err) => {
  console.log(err); // si la respuesta del ajax fue error y mando el "rechazar"
});
0

en este caso yo utilizaría una funcion la cual recibe un parametro y luego usando ajax trae la información, es decir:

Seguimos tu proceso de evento click, el cual al recibir la respuesta, esta es entregada a la función para que procese la accion ajax y entre los datos correspondientes

$(".botonConsulta").click(function(){

//Capturo el número de documento de un input
  var documento = $('.documento');

  var datos = new FormData();
  datos.append('documento', documento);

  $.ajax({
    url: 'ruta/archivo.php',
    method: 'POST',
    data: datos,
    dataType: 'json',
    success: function(respuesta){
      //Muestro en pantalla el color guardado para ese usuario
      $('.colorSeleccionado').html(respuesta['color']);

      //Llamamos a la función y entregamos el parámetro
      TraerDatos(respuesta['color']);

    }
  })
}

function TraerDatos(color){
    var info = new FormData();
    info.append('color', color);

    $.ajax({
         url: 'ruta/archivo.php',
         method: 'POST',
         data: info,
         dataType: 'json',
    success: function(respuesta){
           console.log(respuesta)
    });
}

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.