jquery nested ajax calls formatting

Question

I have a requirement to make 6 ajax calls in succession based on data from the previous call. I am nesting each call in the success of the previous call. my question is what are some good ways to format the code so that it doesnt end up a million rows across my editor?

 $.ajax({
                type: "POST",
                url: "someScript/someScript.php",
                data: form + "&func=build",
                success: function (result) {
                 if (result == "ok")
                 {
                   $.ajax({
                   type: "POST",
                   url: "someScript/someScript.php",
                   data: form + "&func=someOtherFunc",
                   success: function (result) {
                        if (result == "ok")
                        {
                          $.ajax({
                           type: "POST",
                           url: "someScript/someScript.php",
                           data: form + "&func=someOtherFunc",
                           success: function (result) {
                           if (result == "ok")
                           {
                             .....and so on
                           }
                           })
                         }
                      })
                    })
                   }
                 })

ignore brackets, syntax isnt important for this question.

Why don't you wrap ajax call in functions? – Rimpy Mar 06 '14 at 19:07 — Rimpy, Mar 06 '14 at 19:07
create a php script that does all of this work in 1 shot? – Kevin B Mar 06 '14 at 19:16 — Kevin B, Mar 06 '14 at 19:16

score 52 · Accepted Answer · answered Mar 06 '14 at 19:09

52

You can do something like this

function ajaxCall1(){
    $.ajax({
        success: function(){
            ajaxCall2();
        }
    });
}
function ajaxCall2(){
    $.ajax({
        success: function(){
            ajaxCall3();
        }
    });
}
function ajaxCall3(){
    $.ajax({
        success: function(){
            ajaxCall4();
        }
    });
}

answered Mar 06 '14 at 19:09

Rimpy

878
11
15

1

Kudos! After struggling with the nightmare of AJAX callbacks and needing to pass parameters, you have presented a simple and logical solution I (and, as is evident from searching through this site, others) hadn't considered. Thank you. – RationalRabbit Aug 04 '21 at 18:25

score 0 · Answer 2 · answered Aug 02 '16 at 18:18

You can do something like this:

var url = '/echo/json/';
var dados = {acao: acao,codigo: null};

function funcao1(json,data)
    $.post(url, data, function(json){
        return json;
    }).fail(function() {
        alert("deu erro");
    });
}

alert(funcao1(funcao1(funcao1(),{id:"id1"}),{id:"id1"}));

You can add the url and other data as parameters.

Another idea is to create a function that receive an array like this:

[{url:'url1', cb:function1},{url:'url2',cb:function2}]

This could be a recursive function that delete an item every calls end.

jquery nested ajax calls formatting

2 Answers2

Linked