Question

以下代码在触发函数加载时将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

使用$（'＃selector'）。ajaxStart（）和$（'＃selector'）。ajaxStop（）;

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

Answer 3

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'）或其他几个selectors来选择您的div。

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。

在等待jquery ajax加载时，在另一个div中显示loading-message

5 个答案: