如何在每个循环（使用 ajax）完成之前触发另一个动作答案

【问题标题】：How to fire anothing action before a each loop (with ajax) complete如何在每个循环（使用 ajax）完成之前触发另一个动作
【发布时间】：2014-08-12 07:58:27
【问题描述】：

我已经尝试了很长时间，现在我没有更多的想法，请任何人帮助我。

我只是想在将商品添加到购物车后重新加载当前页面，我尝试了通过计数、承诺然后和其他的愚蠢方式，但都失败了。

问题是......在商品添加到购物车之前页面已经重新加载......！以下是我的示例：-

        $("#Button").click(function () {
                var CurrentURL = window.location.href;                    
                var SelectedProduct = $('.SelectedProduct').length;
                $('.SelectedProduct').each(function () {
                    $.ajax({
                        url: "/ShoppingCart/AddToCart",
                        data: { id: $(this).attr('id')},
                        datatype: "json"
                    });

                    --SelectedProduct
                    if (SelectedProduct === 0) {
                        window.location.href = CurrentURL;
                        $('#CartListContent').slideDown()
                    }
                });
        });

        $("#Button").click(function () {
                var CurrentURL = window.location.href;

                var promise = $('.SelectedProduct').each(function () {
                        $.ajax({
                            url: "/ShoppingCart/AddToCart",
                            data: { id: $(this).attr('id')},
                            datatype: "json"
                        });
                    promise.done(function () {
                        window.location.href = CurrentURL;
                        $('#CartListContent').slideDown()
                    });
                });
                });

            }
        });

【问题讨论】：

为什么不用成功回调？
因为我在 ajax 之前有一个 each{}...！如果我使用成功回调，只有第一个项目可以添加到购物车...！

标签： javascript jquery ajax foreach promise

【解决方案1】：

我不知道您对服务器端代码有多少控制权，但您应该让 API 处理将一系列产品添加到购物车，这样会更快、更简单。 http://jsfiddle.net/hqn3eufa/

$("#Button").on('click', function () {

    var selected_products_ids = [];

    $('.SelectedProduct').each(function () {

        selected_products_ids.push(this.id);

    });


    $.ajax({
        url: "/ShoppingCart/AddToCart",
        data: { ids: selected_products_ids },
        datatype: "json",
        success: function() {
            window.location.reload();
        }
    });

});

【讨论】：

这就是我的想法。 Id 需要作为一个数组发送到服务器并在一次调用中处理
它太棒了，我想知道什么（推送概念。）...我稍后会尝试，我想我应该为我工作...非常感谢... !

【解决方案2】：

可以利用ajax的成功回调和reload函数：

$.ajax({
  url: "/ShoppingCart/AddToCart",
  data: { id: $(this).attr('id')},
  datatype: "json",
  success:function(data){
     window.location.reload();
  }
});

【讨论】：

感谢您的建议...！ x10000 我以前试过这个，但问题是我在 ajax 之前有一个 each{}，如果我在这里使用 reload（ajax 成功），只有第一个项目添加到购物车，其余的不能！或者其他人可以让我知道如何将“数据”中的整数列表传递给控制器吗？？？非常感谢...！
服务器是你自己写的吗？还是第三方api？

【解决方案3】：

您的页面在添加到购物车完成之前重新加载。使用回调找出添加到购物车的时间：

   $("#Button").click(function () {
            var CurrentURL = window.location.href;

            var promise = $('.SelectedProduct').each(function () {
                    $.ajax({
                        url: "/ShoppingCart/AddToCart",
                        data: { id: $(this).attr('id')},
                        datatype: "json"
                    }).success(function () {
                    window.location.href = CurrentURL;
                    $('#CartListContent').slideDown()
                });
            });
            });

        }
    });

【讨论】：

感谢您的建议..！ x100000000000 但它仍然不适合我！仍然只有第一个项目被添加到购物车然后停止。（重置项目不能添加到购物车）并且承诺仍然没有触发......我真的很想知道为什么在这种情况下承诺不能触发......拜托。 ...任何专家都可以给我帮助...！谢谢！
嗨，你的权利，我必须编辑我的答案，成功应该在 ajax 调用上，而不是在 promise 对象上。

【解决方案4】：

现在我使用以下方式，它很愚蠢但有效：- 任何其他建议..！？

                var SelectedProduct = $('.SelectedProduct').length;
                $('.SelectedProduct').each(function () {
                    $.ajax({
                        url: "/ShoppingCart/AddToCart",
                        data: { id: $(this).attr('id')},
                        datatype: "json",
                        success: function (data) {
                            --SelectedProduct
                            if (SelectedProduct == 0) {
                                window.location.reload()
                            }
                        }
                    });
                });

【讨论】：