Fatal编程技术网
  • javascript/
  • Javascript 如何在ajax刷新调用期间显示刷新指示器？

Javascript 如何在ajax刷新调用期间显示刷新指示器？

javascript jquery html css ajax

Javascript 如何在ajax刷新调用期间显示刷新指示器？,javascript,jquery,html,css,ajax,Javascript,Jquery,Html,Css,Ajax,我有一些jQuery代码，它每隔10秒重新加载div，而不重新加载整个页面。然而，就在此时，当刷新发生时，用户看不到浏览器上发生任何事情 我知道互联网上有成千上万的例子，但我想为脚本我已经显示了加载的gif图像，而数据检索时，刷新发生每10秒为我，用户应该看到一些像这样的刷新图像- 我相信这可能很容易，但我找不到任何关于如何做到这一点的信息。任何帮助或指点都将不胜感激 问题陈述：- 下面是我的JSP文件（dataInfo.JSP）中的div，我每10秒重新加载一次div容器，而不重新加载整个页

我有一些jQuery代码，它每隔
10秒重新加载div，而不重新加载整个页面。然而，就在此时，当刷新发生时，用户看不到浏览器上发生任何事情

我知道互联网上有成千上万的例子，但我想为脚本我已经显示了加载的gif图像，而数据检索时，刷新发生每10秒为我，用户应该看到一些像这样的刷新图像-



我相信这可能很容易，但我找不到任何关于如何做到这一点的信息。任何帮助或指点都将不胜感激

问题陈述：-

下面是我的JSP文件
（dataInfo.JSP）
中的div，我每10秒重新加载一次div
容器，而不重新加载整个页面


<body>
    <div id='headerDivDash'>
        <h1 id='topHeaderDash'>
          <!-- some image here -->
        </h1>
    </div>
    <div id="vertical-list" style='display: block; list-style-type: none;'>
        <ul class="resp-tabs-list">
            <a href="_blank"><li>Test 1</li></a>
            <br />
            <a href="_blank"><li>Test 2</li></a>
        </ul>
    </div>

    <!-- just need to reload this div, other div should be intact without getting appended -->
    <div class="container">

    </div>
    <div class="footer">Some Value Here</div>
</body>


现在，正如我上面提到的，一旦刷新即将发生，我将灰显
容器div
，并显示如上所示的刷新图像，一旦刷新完成，则显示正常结果，然后刷新图像也将消失


在我当前的示例中可以这样做吗？
启动ajax请求时，将加载图像放置在结果容器上


$('<div id="ajaxLoad"></div>').appendTo('.container');


添加一个
位置：相对到
.container

然后可以启动ajax调用：


$.ajax({
    type: "GET",
    url: "dataInfo.jsp",
    success: function(data) {
        $('.container').html(data).fadeIn("slow");
    },
    complete: function() {
        $('#ajaxLoad').remove();
    }
});



当数据到达并显示时，成功就是这样做的。即使在服务器返回错误代码或查询超时时，也会运行完整的操作。
启动ajax请求时，请将加载图像放在结果容器上


$('<div id="ajaxLoad"></div>').appendTo('.container');


添加一个
位置：相对到
.container

然后可以启动ajax调用：


$.ajax({
    type: "GET",
    url: "dataInfo.jsp",
    success: function(data) {
        $('.container').html(data).fadeIn("slow");
    },
    complete: function() {
        $('#ajaxLoad').remove();
    }
});



当数据到达并显示时，成功就是这样做的。即使服务器返回错误代码或您的查询超时，完整的查询也会运行。
我看到您已经在使用JQuery，所以这个答案非常适合您。
您可以使用此代码创建灰色背景并显示加载的图像


// Create a refresh function:
function refresh(){
    // SHOW overlay
    $('#overlay').show();
    // Retrieve data:
    $.ajax({
        url: 'data.html',
        type: 'GET',
        success: function(data){
            // onSuccess take only the container content
            var content =  $($.parseHTML(data)).filter(".container"); 
            //Replace content inside the div
            $('.container').html(content);
            // HIDE the overlay:
            $('#overlay').hide();
        }
    });
}

$(document).ready(function(){
    // Create overlay and append to body:
    $('<div id="overlay"/>').css({
        position: 'fixed',
        top: 0,
        left: 0,
        width: '100%',
        height: $(window).height() + 'px',
        opacity:0.4, 
        background: 'lightgray url(http://bradsknutson.com/wp-content/uploads/2013/04/page-loader.gif) no-repeat center'
    }).hide().appendTo('body');

    // Execute refresh with interval:
    setInterval(refresh, 1 * 1000);
});



//创建一个刷新函数：
函数刷新（）{
//显示覆盖图
$（“#覆盖”）.show（）；
//检索数据：
$.ajax({
url:'data.html'，
键入：“GET”，
成功：功能（数据）{
//onSuccess仅获取容器内容
var content=$（$.parseHTML（数据））.filter（“.container”）；
//替换div中的内容
$（'.container'）.html（内容）；
//隐藏覆盖：
$（“#覆盖”）.hide（）；
}
});
}
$（文档）.ready（函数（）{
//创建覆盖并附加到正文：
$（''）.css({
位置：'固定'，
排名：0，
左:0,，
宽度：“100%”，
高度：$（窗口）.height（）+'px'，
不透明度：0.4，
背景：“浅灰色url”(http://bradsknutson.com/wp-content/uploads/2013/04/page-loader.gif)无重复中心'
}).hide（）.appendTo（'body'）；
//按以下时间间隔执行刷新：
设置间隔（刷新，1*1000）；
});


希望这对你有帮助。注意：将“img/loading.gif”替换为要使用的gif的路径

下面是代码的工作原理：

我看到您已经在使用JQuery，所以这个答案非常适合您。
您可以使用此代码创建灰色背景并显示加载的图像


// Create a refresh function:
function refresh(){
    // SHOW overlay
    $('#overlay').show();
    // Retrieve data:
    $.ajax({
        url: 'data.html',
        type: 'GET',
        success: function(data){
            // onSuccess take only the container content
            var content =  $($.parseHTML(data)).filter(".container"); 
            //Replace content inside the div
            $('.container').html(content);
            // HIDE the overlay:
            $('#overlay').hide();
        }
    });
}

$(document).ready(function(){
    // Create overlay and append to body:
    $('<div id="overlay"/>').css({
        position: 'fixed',
        top: 0,
        left: 0,
        width: '100%',
        height: $(window).height() + 'px',
        opacity:0.4, 
        background: 'lightgray url(http://bradsknutson.com/wp-content/uploads/2013/04/page-loader.gif) no-repeat center'
    }).hide().appendTo('body');

    // Execute refresh with interval:
    setInterval(refresh, 1 * 1000);
});



//创建一个刷新函数：
函数刷新（）{
//显示覆盖图
$（“#覆盖”）.show（）；
//检索数据：
$.ajax({
url:'data.html'，
键入：“GET”，
成功：功能（数据）{
//onSuccess仅获取容器内容
var content=$（$.parseHTML（数据））.filter（“.container”）；
//替换div中的内容
$（'.container'）.html（内容）；
//隐藏覆盖：
$（“#覆盖”）.hide（）；
}
});
}
$（文档）.ready（函数（）{
//创建覆盖并附加到正文：
$（''）.css({
位置：'固定'，
排名：0，
左:0,，
宽度：“100%”，
高度：$（窗口）.height（）+'px'，
不透明度：0.4，
背景：“浅灰色url”(http://bradsknutson.com/wp-content/uploads/2013/04/page-loader.gif)无重复中心'
}).hide（）.appendTo（'body'）；
//按以下时间间隔执行刷新：
设置间隔（刷新，1*1000）；
});


希望这对你有帮助。注意：将“img/loading.gif”替换为要使用的gif的路径

下面是代码的工作原理：

你能看看这个吗：

我使用了
图标来显示刷新符号。。。
这是实现你想要的目标的方法之一…
你能看看这个吗：

我使用了
图标来显示刷新符号。。。

这是实现您想要的目标的方法之一…
谢谢。因此，在您的示例中，我应该删除jquery调用，对吗？就用你的？我说的对吗？是的，没错：）把它全部删除，用这个代码替换掉。请用你的投票给我一些爱。它在用
dataInfo.jsp
替换
data.html
后运行良好。。但有一个问题。正如你所看到的，我还有其他部门。我还有页眉和页脚div。因此，当前的情况是，在您的代码中，当它刷新container div时，它会附加所有其他div，在刷新之后，我可以在我的浏览器上看到多个div附加在一起。。我不知道怎么修。。有什么想法吗？我想jquery示例中的url部分必须以某种方式进行更改。。bcoz它将加载整个页面。它在其他div中附加了什么？你能给我看一下附件的示例代码吗？你把密码改了吗？谢谢。因此，在您的示例中，我应该删除jquery调用，对吗？就用你的？我说的对吗？是的，没错：）把它全部删除，用这个代码替换掉。请用你的投票给我一些爱。它在替换
data.html
wit之后运行良好