Question

我有一个包含多个下拉框的页面。我想在AJAX完成下拉内容加载和默认值选择之后，将一些下拉列表准备就绪。

所以在每个下拉列表的Ajax函数中，我都有

complete: function () {
        $("#Country").enable();
        $("#ORG_ID").enable();
        $('#Country option[value="@TempData["Country"]"]').prop('selected', true).change();
        $('#ORG_ID option[value="@TempData["ORG_ID"]"]').prop('selected', true).change();
        }

“@ TempData [”Country“]”]是一个ASP.NET MVC Razor变量。

我希望在触发并完成所有Ajax事件之后，JavaScript DOM可以将Country和ORG_ID字段设置为仅使用代码就绪 -

<script type="text/javascript">
    function pageLoad() {
      document.getElementById('Country').readOnly = true;
      document.getElementById('ORG_ID').readOnly = true;
    }
</script>

假设在AJAX完成事件完成后将触发pageLoad或window.onload。但是在设置了pageLoad后，Ajax事件仍然会继续触发更改。永远不能为这些字段设置readOnly。

我错过了什么？在Javescript中是否有比pageLoad或window.onload更完整的页面加载事件？

由于

更新： AJAX调用来自

$(document).ready(function () {
  GetCountry();
}

以上AJAX功能代码在

中

function GetCountry() {
    $("#Country").disable();
    $("#ORG_ID").disable();

    $.ajax({
        type: 'POST',
        url: '@Url.Action("GetCountry/" + ViewBag.Id.ToString(), "RequestList")',
        data: { Direct: isDirect },
        success: function (data, textStatus, jqXHR) {
            if (textStatus != "success") {
                alert("There was an error processing your request.");
                return;
            }

            $.each(data, function (i, item) {
                $('#Country').append($('<option>').val(item.Id).text(item.Text));
            });
        },
        error: function (jqXHR, textStatus, errorThrown) {
            alert("There was an error processing your request.");
        },
        complete: function () {
            $("#Country").enable();
            $("#ORG_ID").enable();
            $('#Country option[value="@TempData["Country"]"]').prop('selected', true).change();
            }
    })
}

Answer 1

AJAX中的第一个A表示异步，这意味着没有等待它，包括window.load或document.ready。

惰性方法是使用$.ajax()中的“async”设置使您的ajax同步，但这会在每次回复等待时暂停所有代码执行和文件加载。不好。

执行此操作的正确方法是使用$.when()。以下是该页面的相关示例。

$.when( $.ajax( "/page1.php" ), $.ajax( "/page2.php" ) ).done(function( a1, a2 ) {
  // a1 and a2 are arguments resolved for the page1 and page2 ajax requests, respectively.
  // Each argument is an array with the following structure: [ data, statusText, jqXHR ]
  var data = a1[ 0 ] + a2[ 0 ]; // a1[ 0 ] = "Whip", a2[ 0 ] = " It"
  if ( /Whip It/.test( data ) ) {
    alert( "We got what we came for!" );
  }
});

编辑：

这不是你想要做的吗？在所有ajax调用完成后触发一个函数？

$(document).ready(function () {
  GetCountry();
});

function GetCountry() {
    $("#Country").disable();
    $("#ORG_ID").disable();

    $.when(
        $.ajax({ // box 1
            type: 'POST',
            url: '@Url.Action("GetCountry/" + ViewBag.Id.ToString(), "RequestList")',
            data: { Direct: isDirect },
            success: function (data, textStatus, jqXHR) {
                if (textStatus != "success") {
                    alert("There was an error processing your request.");
                    return;
                }

                $.each(data, function (i, item) {
                    $('#Country').append($('<option>').val(item.Id).text(item.Text));
                });
            },
            error: function (jqXHR, textStatus, errorThrown) {
                alert("There was an error processing your request.");
            },
            complete: function () {
                $("#Country").enable();
                $("#ORG_ID").enable();
                $('#Country option[value="@TempData["Country"]"]').prop('selected', true).change();
            }
        }),
        $.ajax({ // box 2
            type: 'POST',
            url: '@Url.Action("GetCountry/" + ViewBag.Id.ToString(), "RequestList")',
            data: { Direct: isDirect },
            success: function (data, textStatus, jqXHR) {
                if (textStatus != "success") {
                    alert("There was an error processing your request.");
                    return;
                }

                $.each(data, function (i, item) {
                    $('#Country').append($('<option>').val(item.Id).text(item.Text));
                });
            },
            error: function (jqXHR, textStatus, errorThrown) {
                alert("There was an error processing your request.");
            },
            complete: function () {
                $("#Country").enable();
                $("#ORG_ID").enable();
                $('#Country option[value="@TempData["Country"]"]').prop('selected', true).change();
            }
        })

    ).done(function(){
        // fires after the two ajax calls are done
        document.getElementById('Country').readOnly = true;
        document.getElementById('ORG_ID').readOnly = true;
    });
}

Answer 2

您需要添加 async:false。

如果将async设置为false意味着您调用的语句必须在函数中的下一个语句被调用之前完成。如果设置async：true，则该语句将开始执行，并且无论异步语句是否已完成，都将调用下一个语句。

请尝试此代码

  $.ajax({
        type: 'POST',
        url: '@Url.Action("GetCountry/" + ViewBag.Id.ToString(), "RequestList")',
        async:false,
        data: { Direct: isDirect },
        success: function (data, textStatus, jqXHR) {
            if (textStatus != "success") {
                alert("There was an error processing your request.");
                return;
            }

            $.each(data, function (i, item) {
                $('#Country').append($('<option>').val(item.Id).text(item.Text));
            });
        },
        error: function (jqXHR, textStatus, errorThrown) {
            alert("There was an error processing your request.");
        },
        complete: function () {
            $("#Country").enable();
            $("#ORG_ID").enable();
            $('#Country option[value="@TempData["Country"]"]').prop('selected', true).change();
            }
    })

完全页面加载的事件

2 个答案: