如何在不刷新整个页面的情况下每10秒刷新一次Div?

时间:2012-10-30 05:00:28

标签: javascript jquery element partial-page-refresh

我正在开发一个不允许任何服务器端脚本的网站平台,因此jquery和javascript几乎是我必须使用的全部内容。我正在尝试创建一个脚本来处理该站点,该站点将每10秒更新一个包含收件箱消息计数的div。我已经成功地每隔十秒刷新一次div,但麻烦在于页面浏览量。我的脚本刷新整个页面并计算页面视图,但我只想刷新一个div。我的脚本导致的问题的一个例子是在网站上查看具有页面查看计数器(论坛帖子,博客帖子等)的任何内容时,由于脚本刷新,页面视图变得疯狂。我对Javascript很新,所以我不能完全确定有这种方法。

我正在使用的是:

    <div id="msgalert" style="display: none"; "width: 100px !important">
<a href=""> You have $inbox_msg_count new messages.</a>
</div>

$ inbox_msg_count 是一个抓取邮件计数的调用,由该网站所在的平台提供。它在使用时自动显示消息计数。

然后完成所有工作的脚本就是:

    <script>
 setInterval(function(facepop){
  var x= document.getElementById("SUI-WelcomeLine-InboxNum");
var z = x.innerText;
 if(x.textContent.length > 0)
$("#msgalert").show('slow');
}, 1000);
facepop();
</script>
<script>
setInterval(function() {  
$("#msgalert").load(location.href+" #msgalert>*","");  
}, 1000); // seconds to wait, miliseconds
</script>

我意识到我可能没有做到最好解释这个,但那是因为我自己很困惑。就像我之前提到的,这个代码功能正是我想要的,但我不希望它刷新整个页面并架起页面视图。非常感谢任何帮助。

3 个答案:

答案 0 :(得分:0)

您可能会尝试查看 iframe 并将其用作更新/刷新内容(div)的方法。首先设置一个iframe,并给它一个id,然后用JS抓取对象并在其上调用refresh。

答案 1 :(得分:0)

你的问题似乎有点不同,所以我认为从div中提交一个可能会帮助你......

$(document).ready(function() 
{
            // bind 'myForm' and provide a simple callback function
               $("#tempForm").ajaxForm({
               url:'../member/uploadTempImage',//serverURL
               type:'post',
               beforeSend:function()
               {
                   alert(" if any operation needed before the ajax call like setting the value or retrieving data from the div ");
               },
               success:function(e){
                alert("this is the response data simply set it inside the div ");
               }
        });
        });

答案 2 :(得分:0)

我认为这可能是在没有表格的情况下完成的,绝对没有iframe( shudder )..

也许是这样的?

$(document).ready(function()
{
  setInterval(function(facepop)
     {
        var x= document.getElementById("SUI-WelcomeLine-InboxNum");
        var z = x.innerText;

        if(x.textContent.length > 0)
           $("#msgalert").show('slow');

        $.ajax({
            type: "POST",
            url: location.href,
            success: function(msg)
             {
                $("#msgalert").html(msg);
             }
        });

     },1000);

它并不完全清楚你正在尝试做什么(或者可能只是因为我太累了(它是午夜......)),但是$ .ajax ()上面的电话是我建议的主要内容。

将两个函数封装在一个setInterval()中可以使事情更容易阅读,并且可以消除显示 msgalert 元素和&#34;重新加载&#34;之间的1秒差距。它