让我稍微解释一下我的代码(如果有什么不对，请原谅，我刚刚从头开始编写这个示例，它非常接近我目前的代码)。

HTML:

<form id="form">
    <!-- Friend 1 -->
    Name 1: <input type="text" name="friendName1" id="friendName1" class="friendName" value=""><br />
    Email 1: <input type="text" name="friendEmail1" id="friendEmail1" value=""><br /><br />
    <!-- Friend 2 -->
    Name 2:<input type="text" name="friendName2" id="friendName2" class="friendName" value=""><br />
    Email 2:<input type="text" name="friendEmail2" id="friendEmail2" value=""><br /><br />
    <!-- Friend 3 -->
    Name 3:<input type="text" name="friendName3" id="friendName3" class="friendName" value=""><br />
    Email 3:<input type="text" name="friendEmail3" id="friendEmail3" value=""><br /><br />
    <!-- Friend 4 -->
    Name 4:<input type="text" name="friendName4" id="friendName4" class="friendName" value=""><br />
    Email 4:<input type="text" name="friendEmail4" id="friendEmail4" value=""><br /><br />
    <!-- Submit -->
    <input name="submit" type="submit" value="Submit">
</form>

JS:

$("#form").submit(function(){

    $(".friendName[value!='']").each(function(){
        var idEmail = 'friendEmail' + $(this).attr("id").replace('friendName','');
        if($("#"+idEmail+"[value!='']").length > 0){
            var name = $(this).val();
            var email = $("#"+idEmail).val();

            // Submit the ajax request
            $.ajax({ 
                type: 'POST', 
                url: 'ajax/url', 
                data: {
                    name: name,
                    email: email
                },
                success: function(json) {
                    // Log a console entry if our ajax request was successful
                    console.log(name + " was submitted via ajax");
                }
            });
        }
    });

    // Redirect the user to the thank you page
    setTimeout( function() { window.location= '/thanks'; }, 2000 );

});

JSFiddle(重定向已删除，ajax 调用替换为 fiddle 控制台日志)

http://jsfiddle.net/cM5PX/

HTML 是一个简单的表单，带有 friend 姓名和 friend 电子邮件输入字段。

JS 有一个 each 函数，如果名称和关联的电子邮件有值，它会运行一个 ajax 调用。

我需要一种方法来运行这些 ajax 调用(可能有 1 个循环，也可能有 15 个循环)，然后在它们全部完成后，重定向到一个新页面。

我目前的做法很糟糕，因为所有的 ajax 调用都没有在页面重定向之前完成运行。

我该怎么做才能让它变得更好？它需要万无一失，并且只有在所有 ajax 调用完成后才重定向(成功或错误，这无关紧要 - 它只需要在完成后重定向)。

我试过使用 async: false 但它似乎没有什么不同。

我考虑过在每个函数中放置一个计数器，在 ajax 成功函数中放置一个计数器，如果它们都匹配，则进行重定向，但我正在寻找一些更有经验的指导。

最佳答案

使用deferred objects :

$("#form").submit(function(e){

    e.preventDefault();

    var calls = [];

    $(".friendName[value!='']").each(function(){
        // Submit the ajax request
        calls.push($.ajax({ 
            type: 'POST', 
            url: 'ajax/url', 
            data: {
                name: name,
                email: email
             },
             success: function(json) {
                // Log a console entry if our ajax request was successful
                console.log(name + " was submitted via ajax");
             }
         }));
    });

    $.when.apply($, calls).then(function() {
        window.location= '/thanks';
    });
});

关于javascript - each() 函数中的多个 ajax 调用.. 然后在所有调用完成后执行某些操作？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8726046/