javascript - 页面完全加载事件

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"]"] is an ASP.NET MVC Razor variable.

我希望在所有 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 事件仍然会继续触发更改。永远不能为这些字段设置只读。

我错过了什么？ 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;
    });
}