完全页面加载事件

Completely page loaded event

本文关键字：加载 事件      更新时间：2023-09-26

我有一个有多个下拉框的页面。我想让一些下拉菜单只有在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可以将国家和ORG_ID字段设置为仅使用代码-

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

假设页面加载或窗口加载。onload将在AJAX的complete事件完成后触发。但是在设置pageLoad之后，Ajax事件仍然会继续为更改而触发。这些字段永远不能设置readOnly。

我错过了什么?是否有比pagload或window更完整的页面加载事件?javascript中的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();
            }
    })
}

AJAX中的第一个A代表异步，这意味着没有任何东西等待它，包括窗口。加载或文档。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;
    });
}

您需要添加async:false.

设置async为false意味着你正在调用的语句必须在函数中的下一个语句被调用之前完成。如果你设置async: true，那么该语句将开始执行，无论async语句是否已经完成，下一条语句将被调用。

请尝试此代码

  $.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();
            }
    })
相关文章：