Question

我希望在从点击处理程序调用Ajax更新时显示一个div作为加载屏幕，点击处理程序可能需要一两秒钟，例如：

var loadingControl;

loadingControl = $("#loading"); // Is initialized after DOM Ready

$('#updateLink').click(function (e) {
    loadingControl.show();
    $.ajax(
    {
        url: 'http://some.url',
        type: "POST",
        success: function (data) {
            $('#divToUpdate').html(data);
        },
        error: handleAjaxError
    });

    loadingControl.hide();

    e.preventDefault();
});

loading div没有显示。我怀疑这是因为在click处理程序完成之前DOM不会更新。这是对的吗？

如何重新调整此代码以允许在调用.show()后更新DOM，以便在div运行时显示加载屏幕.ajax？

Answer 1

ajax调用是异步的，因此代码继续运行。因此，在ajax启动后立即调用loadingControl.hide()函数，尝试在loadingControl.hide();函数内移动success。

$('#updateLink').click(function (e) {
    loadingControl.show();
    $.ajax(
    {
        url: 'http://some.url',
        type: "POST",
        success: function (data) {
            $('#divToUpdate').html(data);
            loadingControl.hide();
        },
        error: handleAjaxError
    });


    e.preventDefault();
});

来自Click Handler的jQuery DOM更新

1 个答案: