Make Ajax calls within a loop

Question

Make Ajax calls within a loop

Navigation

#1 by (0 votes)
#2 by (0 votes)

1

I must make Ajax calls with dynamic parameters, I use the $ .each to go through the values of the parameters and send them to the ajax call but apparently they run at the same time, and I want it to run one after another, as it is dynamic I do not have an exact number of calls to Ajax, any ideas ?? This is what I tried:

 $.each(params, function (index, value) {
                v1 = value.v1;
                v2 = value.v2;

                llamadoAjax(v1, v2);
            });

Where calledAjax is:

var parametros = {
    v1: v1,
    v2: v2
}

$.ajax({
    url: "WebService/ws.aspx/Funcion",
    type: 'POST',
    dataType: 'json',
    contentType: 'application/json; charset=utf-8',
    data: JSON.stringify(parametros),
    destroy: true,
    success: function (result) {}
 });

It works very well but ... apparently the call to ajax is made at the same time, some idea of how to pause them ??

jquery ajax

asked by EriK 09.10.2017 в 23:40

source

2 answers

I have an error when starting with nginx rails5 Kivy / buildozer error when creating my apk

score 0 · Answer 1

Ajax is an asynchronous technology, which means that additional data is requested from the server and loaded in the background without interrupting the behavior of the web application. However, it is possible to configure the requests as synchronous in such a way that the interactivity of the web application stops until the response by the server.

In your case, you are making the ajax calls asynchronously (configured by default), which means that the calls are made and the execution continues without waiting for a response from the server for each of them.

To be able to carry out some process for each answer to the calls, and thus to work them "one after the other", you must configure your calls so that they are carried out synchronously by setting the async: false parameter. For example:

$.ajax({
    url: "WebService/ws.aspx/Funcion",
    type: 'POST',
    dataType: 'json',
    async:false
    contentType: 'application/json; charset=utf-8',
    data: JSON.stringify(parametros),
    destroy: true,
    success: function (result) {//Proceso por cada respuesta (result) a la llamada//}
 });

score 0 · Answer 2

I would use recursion, since the use of async: false is not recommended according to the jQuery documentation itself.

According to your example, this would be the function calledAjax () :

function llamadoAjax(params, index) {
    // Estoy dando un poco por echo que esta es la estructura de tu array. 
    // Cambiala si fuera necesario
    var parametros = {
        v1: params[index].v1,
        v2: params[index].v2
    }

    $.ajax({
        url: "WebService/ws.aspx/Funcion",
        type: 'POST',
        dataType: 'json',
        contentType: 'application/json; charset=utf-8',
        data: JSON.stringify(parametros),
        destroy: true,
        invokedata: { params: params, index: index },
        success: function (result) {
            var 
                params = this.invokedata.params,
                index = this.invokedata.index;

            // Comprueba si hemos llegado al final del array.
            // Si no es asi, usamos recursividad para la siguiente iteración.
            if (params.length < index)
                llamadoAjax(params, index++);
            // Ha llegado al final del array. Finaliza el proceso.
            else
                console.log('Fin del proceso');
        }
     });    
}

And to invoke the process, a call like any other. In this case, the initial value of index will be 0.

llamadoAjax(params, 0);