MVC 按顺序执行 Ajax 调用

Question

我有一系列 Ajax 调用来调用存储过程并加载我的部分视图。但是，有时我会得到不同的结果，因为 Ajax 调用并不总是按顺序触发。如何确保它们始终按照点击事件中的顺序触发？

    $('#btnSearch').click(function (data) {

        //Renders Plan Info
        var theGroupNumber = $('#GroupNumber').val().substring($('#GroupNumber').val().length - 7).slice(0, 6);
        var theStackCode = $('#StackCode').val();
        var theEffectiveDate = $('#EffectiveDate').val();

        //Clears the div Sections when the search button is clicked
        $('#divPlanInfo').empty();
        $('#divPrimaryStack').empty();
        $('#divGlobalExceptions').empty();
        $('#divPlanExceptions').empty();
        $('#divGroupExceptions').empty();

        // Renders Plan Info
        $.ajax({
            type: "POST",
            url: '@Url.Action("PlanInfoView")', // the method we are calling
            dataType: "HTML",
            data: { GroupNumber: theGroupNumber, StackCode: theStackCode, EffectiveDate: theEffectiveDate },
            success: function (data) {
                $('#divPlanInfo').append(data);
            },
            error: function (result) {
                alert('No Results Plan Info Found');
            }
        });

        //Renders the Primary Stack Rule
        $.ajax({
            type: "POST",
            url: '@Url.Action("PrimaryStackRuleView")', // the method we are calling
            dataType: "html",
            data: { GroupNumber: theGroupNumber, StackCode: theStackCode, EffectiveDate: theEffectiveDate },
            success: function (data) {
                if (data) {
                    $('#divPrimaryStack').append(data);
                }
            },
            error: function (result) {
                alert('No Primary Stack Rule Found');
            }
        });

        //Renders the Global Exceptions
        $.ajax({
            type: "POST",
            url: '@Url.Action("GlobalExceptionsView")', // the method we are calling
            dataType: "html",
            data: {},
            success: function (data) {
                if (data) {
                    $('#divGlobalExceptions').append(data);
                }
            },
            error: function (result) {
                alert('No Global Exceptions Found');
            }
        });

        //Renders the Stack Code Exceptions
        $.ajax({
            type: "POST",
            url: '@Url.Action("PlanExceptionsView")', // the method we are calling
            dataType: "html",
            data: { StackCode: theStackCode },
            success: function (data) {
                if (data) {
                    $('#divPlanExceptions').append(data);
                }
            },
            error: function (result) {
                alert('No Stack Code Exceptions Found');
            }
        });

        //Renders the Group Number Exceptions
        $.ajax({
            type: "POST",
            url: '@Url.Action("GroupExceptionsView")', // the method we are calling
            dataType: "html",
            data: { GroupNumber: theGroupNumber, StackCode: theStackCode },
            success: function (data) {
                if (data) {
                    $('#divGroupExceptions').append(data);
                }
            },
            error: function (result) {
                alert('No Stack Code Exceptions Found');
            }
        });


    });

Answer 1

你可以为每个ajax调用创建一个函数，然后一个一个调用：

var PrimaryStackRule = function(){
   $.ajax({
            type: "POST",
            url: '@Url.Action("PrimaryStackRuleView")', // the method we are calling
            dataType: "html",
            data: { GroupNumber: theGroupNumber, StackCode: theStackCode, EffectiveDate: theEffectiveDate },
            success: function (data) {
                if (data) {
                    $('#divPrimaryStack').append(data);
                }
            },
            error: function (result) {
                alert('No Primary Stack Rule Found');
            }
        });
}

并调用第一次调用成功的函数：

 $.ajax({
            type: "POST",
            url: '@Url.Action("PlanInfoView")', // the method we are calling
            dataType: "HTML",
            data: { GroupNumber: theGroupNumber, StackCode: theStackCode, EffectiveDate: theEffectiveDate },
            success: function (data) {
                $('#divPlanInfo').append(data);
                PrimaryStackRule();
            },
            error: function (result) {
                alert('No Results Plan Info Found');
            }
        });

Answer 2

您可以将所有代码包装在 $.when 和 $.then 中，$.when 可以很好地与 $.ajax 一起使用，例如查看一些演示 https://api.jquery.com/jquery.when/

我使用 $.when 方法编写您的代码。它看起来像这样。

$.when(
        $.ajax({
            type: "POST",
            url: '@Url.Action("PlanInfoView")', // the method we are calling
            dataType: "HTML",
            data: { GroupNumber: theGroupNumber, StackCode: theStackCode, EffectiveDate: theEffectiveDate },
            success: function (data) {
                $('#divPlanInfo').append(data);
            },
            error: function (result) {
                alert('No Results Plan Info Found');
            }
        })

    ).then(

        $.ajax({
            type: "POST",
            url: '@Url.Action("PrimaryStackRuleView")', // the method we are calling
            dataType: "html",
            data: { GroupNumber: theGroupNumber, StackCode: theStackCode, EffectiveDate: theEffectiveDate },
            success: function (data) {
                if (data) {
                    $('#divPrimaryStack').append(data);
                }
            },
            error: function (result) {
                alert('No Primary Stack Rule Found');
            }
        })

        ).then(
        //Renders the Global Exceptions
        $.ajax({
            type: "POST",
            url: '@Url.Action("GlobalExceptionsView")', // the method we are calling
            dataType: "html",
            data: {},
            success: function (data) {
                if (data) {
                    $('#divGlobalExceptions').append(data);
                }
            },
            error: function (result) {
                alert('No Global Exceptions Found');
            }
        })

    ).then(
        //Renders the Stack Code Exceptions
        $.ajax({
            type: "POST",
            url: '@Url.Action("PlanExceptionsView")', // the method we are calling
            dataType: "html",
            data: { StackCode: theStackCode },
            success: function (data) {
                if (data) {
                    $('#divPlanExceptions').append(data);
                }
            },
            error: function (result) {
                alert('No Stack Code Exceptions Found');
            }
        })
        ).then(
        //Renders the Group Number Exceptions
        $.ajax({
            type: "POST",
            url: '@Url.Action("GroupExceptionsView")', // the method we are calling
            dataType: "html",
            data: { GroupNumber: theGroupNumber, StackCode: theStackCode },
            success: function (data) {
                if (data) {
                    $('#divGroupExceptions').append(data);
                }
            },
            error: function (result) {
                alert('No Stack Code Exceptions Found');
            }
        })
        )