0

我有一个自动刷新按钮，当按钮打开时，我的网页的特定部分应该刷新。例如，如果我有一个 DIV，当按钮打开时，该 DIV 中的内容应该重新加载。如果按钮关闭，则 DIV 应保持不变。

只有当自动刷新按钮打开时，我才有编码，整个页面都在刷新。是否可以刷新网页的特定部分？

这是我的编码：-

var int=self.setInterval(function(){refreshPage()},60000);
$(document).ready(function() {
   var hashTag = window.location.href.split('#');
   if (hashTag[1] == 'reload') {
      $('#refresh').addClass('refresh-on').html('');  
   }
   $('#refresh').on('click', function() { 
      $(this).toggleClass('refresh-on'); 
      if ($(this).hasClass('refresh-on'))
         $(this).html('Refresh On');
      else 
         $(this).html('Refresh Off');
   });
});

function refreshPage() {
   if ($('#refresh').hasClass('refresh-on')) {
      location.hash = 'reload';
      window.location.reload();
   } else
     location.hash = '';
}
4

2 回答 2

1

如果可以将要刷新的内容保存在单独的页面中，则可以使用简单的 jquery 的 load() 方法。

将要刷新的内容放在'content.php'中

$("#refreshDIV").load("content.php");

您可以在需要时调用此方法，它可以动态加载。

于 2013-01-13T11:43:57.943 回答
0

确实，jquery 的 load() 方法是使用外部脚本更新分离内容的好方法……
下面是一个包含 2 个 div 的小 html 页面的示例。
一个是每 1 秒刷新一次，另一个是每 3 秒刷新一次……
Div 正在使用 refreshDiv 函数进行刷新。
refreshDiv 函数接受 3 个参数：

  • div_id：这是要刷新的 div 的 id；
  • script_file：您要启动以刷新 div 的脚本；（脚本/目录）；

  • data：通过 GET 方法传递给脚本（PHP）的一些数据；

    <html>
<head>
   <title>Stack OverFlow - 14302842</title>
   <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
   <script type="text/javascript">
      function refreshDiv(div_id, script_file, data) {
         var today = new Date();
         $("#"+div_id).load("scripts/"+script_file+"?_"+Math.random()+"&data="+data);           
      }

      $(document).ready(function () {
          refreshDiv('div1','ls.php','/tmp');
          refreshDiv('div2','ls.php','/home');

          setInterval(function() {
              // Do something every 3 seconds
              refreshDiv('div1','ls.php','/tmp');
          }, 3000);

          setInterval(function() {
             // Do something every 1 seconds
             refreshDiv('div2','ls.php','/home');
          }, 1000);

      });
   </script>
</head>
<body>
    <div id="div1" style="color: #F00; border: 1px solid #F00; text-align: center;">Some Text</div>
    <div id="div2" style="color: #00F; border: 1px solid #00F; text-align: center;">Some Text</div>
</body>
</html>
于 2013-01-13T15:10:29.983 回答