Question

我有一个更新我的网站信息的脚本，它每秒从另一个页面加载日期，并且我可以在我的网站上有一个时钟更新的时钟。但是，我想做同样的事情，但我的网站的另一部分。

这是我目前使用的代码：

<script type="text/javascript" charset="utf-8">

    $(document).ready(function() 
    {
        $("#myDiv").load("response.php");
        var refreshId = setInterval(function() 
        {
            $("#myDiv").load('time.php');
        }, 1000);
    });

</script>

然后当我要显示我使用的时间时：

 <div id="myDiv"> </div>

那我怎么能在我网站的另一部分上使用它呢？编写脚本并将'#myDiv'更改为'#myDiv2'之类的其他内容是否明智？还是有另一种方法可以在同一个脚本中执行此操作？

我想知道这种情况的最佳做法。

感谢您的时间。

Answer 1

我个人更喜欢更具说明性的风格，所以像

HTML：

<div data-update="newContent.php" data-refresh-interval="500"></div>

使用Javascript：

$('[data-update]').each(function() {
  var self = $(this);
  var target = self.data('update');   
  var refreshId =  setInterval(function() { self.load(target); }, self.data('refresh-interval'));
});

这种方法意味着识别页面更新的所有信息都存在于HTML中，然后（希望！）更容易推理页面，只需要查看视图以了解会发生什么。它还使得向其他页面添加功能变得更加容易，因为只需要应用相同的标记。

Answer 2

$("#myDiv").load("response.php");
$("#myDiv2").load("response2.php");
var refreshId = setInterval(function() 
{
    $("#myDiv").load('time.php');
    $("#myDiv2").load('time2.php');
}, 1000);

像这样，我认为应该有效。

Answer 3

一般来说：
这里的最佳做法是将该代码存储在外部js文件中，并将其加载到您需要的每个页面上。

仅用于显示时间的元素（并使用从load.php返回的标记）：
您可以做的是在页面加载时使用jQuery插入#myDiv元素并在函数中收集此功能，如下所示：

$(document).ready(function() {
    function insert_time_element(id) {
        // Cache the variables. See jQuery best practices
        var $myDiv = $(document).append('<div id="' + id + '"></div>');

        // Your code (slighty altered):
        // Could also be cached.
        $myDiv.load("response.php"); 
        var refreshId = setInterval(function() {
            $myDiv.load('time.php');
        }, 1000);
    }

    insert_time_element('myDiv');
});

有关jQuery的最佳实践，请阅读有关jQuery最佳实践的NetTuts +文章：http://net.tutsplus.com/tutorials/javascript-ajax/14-helpful-jquery-tricks-notes-and-best-practices/

如何动态更新网页的不同部分？

3 个答案: