等待 jquery ajax 加载时在另一个 div 中显示加载消息

Question

当函数 load 被触发时，以下代码将 page-handler.php 加载到 #page 中，并在等待时显示 ajax_load。如何使 ajax_load loding-message 显示在另一个 div 中，并且在 loding 完成后消失？

function load(value) {
    $('#page').html(ajax_load);
    $("#page").load("page-handler.php", {page:value});
    return false;
}

Answer 1

首先创建一个带有加载消息的隐藏 div：

 <div id="loading">loading...</div>

然后在您的函数中：

function load(value) {
    $('#loading').show();
    $('#page').html(ajax_load);
    $("#page").load("page-handler.php", {page:value}, function(){
            $('#loading').hide();
    });
    return false;
}

当然，如果 ajax 调用不成功，您必须采取一些措施。

Answer 2

function load(value) {
    $('somediv').html(ajax_load);
    $("#page").load("page-handler.php", {page:value}, function() {
      $('somediv').empty(); // or set new contents, or hide, or whatever
    });
    return false;
}

这会将内容放入 id 为“somediv”的任何内容中。您可以使用一个类（'.class'）或其他几个选择器 选择你的 div。

Answer 3

考虑使用 $('#selector').ajaxStart() 和 $('#selector').ajaxStop();

http://api.jquery.com/ajaxStart/

Answer 4

在开始通话之前显示 div 并将其隐藏在回调中，例如：

function load(value) {
    $('#busydiv').show(); // shows busy indicator
    $('#page').html(ajax_load);
    $("#page").load("page-handler.php", {page:value}, function() {
         $('#busydiv').hide();
    });
    return false;
}

Answer 5

所以我想这就是你想要的？

$("#anotherDiv").html(message);
$("#page").load("page-handler.php", {page:value}, function(){$("#anotherDiv").hide();});

当 ajax 加载时，这将隐藏另一个 div。