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

【问题标题】：How to update different parts of a web page dynamically?如何动态更新网页的不同部分？
【发布时间】：2012-01-10 23:27:37
【问题描述】：

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

这是我目前使用的代码：

<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”之类的其他内容是否明智，或者我可以在同一个脚本中使用其他方法吗？

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

感谢您的时间。

【问题讨论】：

@ragebunny：并不是说调用页面只是为了有时间是一个好习惯，我会说最好花时间一次，然后使用javascript添加时间通过了。这不是事实吗？
@netadictos 是的，这确实有道理。谢谢。
@piskvor 我已经让它通过代码工作并粘贴原始但更改了 div，现在它可以工作，因为它是一个新功能，但我想知道它是否是好的做法或者是否有办法对我来说更好的方法。时间可以用 JS 完成，但另一部分需要从数据库中不断刷新。

标签： javascript jquery html

【解决方案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 中，然后（希望！）当您只需要查看视图以了解会发生什么时，更容易推理页面。它还使得向其他页面添加功能变得更加容易，因为只需应用相同的标记。

【讨论】：

这是个好主意，始终牢记这只对 html 5 进行验证（我指的是 w3c html 验证）。

【解决方案2】：

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

我认为这样应该可以了。

【讨论】：

【解决方案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 的最佳实践，请阅读 NetTuts+ 关于 jQuery 最佳实践的文章：http://net.tutsplus.com/tutorials/javascript-ajax/14-helpful-jquery-tricks-notes-and-best-practices/

【讨论】：