在each（）函数内部调用多个ajax ..然后在完成所有这些操作后执行某些操作？

Let me explain my code a little bit (Excuse me if somethings wrong, I've just written this example from scratch, it is very close to what I currently have).

让我稍微解释一下我的代码（对不起，如果有些错误，我刚刚从头开始编写这个例子，它与我现在的非常接近）。

HTML:

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:

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 (redirect removed and ajax call replaced with console log for fiddle)

JSFiddle（重定向已删除，ajax调用替换为控制台日志，用于小提琴）

http://jsfiddle.net/cM5PX/

The HTML is a simple form, with friend name and friend email input fields.

HTML是一个简单的表单，包含朋友姓名和朋友电子邮件输入字段。

The JS has an each function, which if the name and associated email have values, it runs an ajax call.

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

I need a way for these ajax calls to run (there could be 1 loop, there could be 15) and then after they have all finished, redirect to a new page.

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

The current way I'm doing it is horrible, as all of the ajax calls do not finish running before the page redirects.

我正在做的当前方式是可怕的，因为所有的ajax调用都没有在页面重定向之前完成运行。

What can I do to make this better? It needs to be fool proof and ONLY redirect once all of the ajax calls have finished (success or error, it doesn't matter - it just needs to redirect once its finished).

我能做些什么才能让它变得更好？它需要是万无一失的，并且只有在所有ajax调用完成后才会重定向（成功或错误，无关紧要 - 它只需要在完成后重定向）。

I have tried using async: false but it doesn't seem to make a difference.

我尝试过使用async：false但它似乎没有什么区别。

I've thought about putting a counter in the each function and a counter in the ajax success function and if they both match, then do the redirect, but I am looking for some more experienced guidance.

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

4 个解决方案

#1

Use 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';
    });
});

4 个解决方案

#1

更多相关文章

随机推荐