Question

我已经尝试了以下很长时间了，现在我已经不再有任何想法，任何人都可以帮助我。

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

问题是......在项目添加到购物车之前页面已经重新加载......！以下是我的样本： -

        $("#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()
                    });
                });
                });

            }
        });

Answer 1

您可以使用ajax的成功回调和重载功能：

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

Answer 2

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

   $("#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()
                });
            });
            });

        }
    });

Answer 3

现在我使用以下方式，它是愚蠢但工作： - 还有其他建议..！？

                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()
                            }
                        }
                    });
                });

Answer 4

我不知道您对服务器端代码有多少控制权，但是您应该让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();
        }
    });

});

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

4 个答案: