Jquery – Ordenes Ajax correlativas / encadenadas o llamar a un ajax con el resultado de otra

Ya hemos visto como añadir un código en un fichero PHP y hacer un js con el código y llamadas ajax a este php , vamos a ver como una vez recibida la información del Ajax vamos a llamar a otras ajax, en este caso usaremos funciones dentro del propio código del .js

Tenemos el Ajax original

//Lo primero que debemos hacer es activar el js al leer el documento
$(document).ready(function(){
//Añadiremos las variables principales que sean necesarias, usando el símbolo $ para que sean globales

// añadimos la función cuando se hace click en un botón, en esta ocasión con el id: update_products

    $('#update_products').on('click',function(event){

// y aqui añadimos la orden Ajax
        $.ajax({
                type:'post',
                data : "{}",
//llamamos al fichero creado anteriormente, esta vez si orden 
                url:'../modules/importsuarez/readajax.php', 
                dataType: "json",
                // ordenes y codigo al recibir que todo funciono correctamente
                success : function(response) {
// lo añadimos a una variable global el resultado del ajax
                    $productos = response; 
//Vamos valor por valor hasta terminar todo el array
                    $.each(response,function(index,itemData){
                        // Aqui añadiremos el codigo necesario
                        $lineas++;
                    });
                },
//una vez ha completado la orden ajax, mostramos el resultado o añadimos otro codigo.
                complete : function(){
                    $('#column_right').html("Total productos : "+$lineas);
                   
                }
                
                
            });
    }

}

Lo que debemos hacer es añadir una función para que pueda ser llamada cuando el resultado del primer Ajax sea correcto y usar los valores de esa respuesta para llamar o ejecutar el PHP y la orden correspondiente

Añadiremos esta función, recuerda que debe estar dentro de $(document).ready(function(){}

function readselected(productselected){
        $.ajax({
            type:'post',
           
            data: "{}",
//Usamos la orden1 y el producto o valor que nos enviar

            url:'../modules/importsuarez/readajax.php?orden=orden1&producto='+$productselected,
            dataType: "json",
            success : function(responses) {
                 $.each(responses,function(index,itemData){
                     $nombrep = itemData.name;
                   //añadimos mas ordenes o funciones con el resultado
                   //ajaxcustom(prod);

               });
                
            },
            error: function(jqxhr, status, exception) {
                
            },
            
            
        });
    }

Una vez tenemos la función podemos usarla dentro de nuestro “success” del primer ajax

success : function(responses) {
          $.each(responses,function(index,itemData){
              var productselected  = "";
//usamos una variable para añadir el ID o cualquier otro valor del array que nos ha
//resultado de la orden Ajax
              productselected  = this.id;
              readselected(productselected);
              $lineas++;
           });
                
},

De esta manera podemos encadenar las ordenes Ajax que queramos y por lo tanto no bloquear el servidor y que nos de un error 500.

Deja una respuesta
You May Also Like