javascript 如何动态更新网页的不同部分？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8805535/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to update different parts of a web page dynamically?
提问by ragebunny
I have a script that updates information of my website, it loads the date from another page every second and with this i can have a clock on my website that updates ever second. However i want to do the same sort of thing but with another part of my website.
我有一个脚本来更新我网站的信息，它每秒从另一个页面加载日期，这样我就可以在我的网站上有一个每秒更新的时钟。但是，我想用我网站的另一部分做同样的事情。
This is the code im using so far:
这是我目前使用的代码：
<script type="text/javascript" charset="utf-8">
$(document).ready(function()
{
$("#myDiv").load("response.php");
var refreshId = setInterval(function()
{
$("#myDiv").load('time.php');
}, 1000);
});
</script>
and then when i was to display the time i use:
然后当我要显示我使用的时间时：
<div id="myDiv"> </div>
So how could i use it on another part of my website? Would it be wise to code the script and change the '#myDiv' to something else like '#myDiv2' or is there another way i could do it in the same script?
那么我怎样才能在我网站的另一部分使用它呢？编写脚本并将“#myDiv”更改为“#myDiv2”之类的其他内容是否明智，还是有另一种方法可以在同一脚本中执行此操作？
I want to know the best practise for this situation.
我想知道这种情况的最佳实践。
Thanks for the time.
谢谢你的时间。
回答by Rich O'Kelly
Personally I prefer a more declarative style, so something like
就我个人而言，我更喜欢一种更具声明性的风格，所以像
HTML:
HTML：
<div data-update="newContent.php" data-refresh-interval="500"></div>
Javascript:
Javascript：
$('[data-update]').each(function() {
var self = $(this);
var target = self.data('update');
var refreshId = setInterval(function() { self.load(target); }, self.data('refresh-interval'));
});
This approach means that all information to discern page updates lives in the HTML, it then is (hopefully!) easier to reason about pages when you only have to look in the view to figure out what will happen. It also makes it much easier to add functionality to other pages, since applying the same markup is all that is required.
这种方法意味着识别页面更新的所有信息都存在于 HTML 中，然后（希望如此！）当您只需要查看视图以找出会发生什么时，更容易推理页面。它还可以更轻松地向其他页面添加功能，因为只需应用相同的标记即可。
回答by Fildor
$("#myDiv").load("response.php");
$("#myDiv2").load("response2.php");
var refreshId = setInterval(function()
{
$("#myDiv").load('time.php');
$("#myDiv2").load('time2.php');
}, 1000);
Like this it should work I think.
像这样它应该工作我认为。
回答by Maarten Jacobs
In general:
The best practice here would be to store that code in an external js file and load it on every page you need it.
一般而言：
这里的最佳实践是将该代码存储在外部 js 文件中，并将其加载到您需要的每个页面上。
For just an element that shows the time (and uses the markup returned from load.php):
What you can do is insert the #myDiv element with jQuery when the page loads and collect this functionality in a function, as following:
对于仅显示时间的元素（并使用从 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');
});
For best practices specifically to jQuery, read the NetTuts+ article on jQuery best practices: http://net.tutsplus.com/tutorials/javascript-ajax/14-helpful-jquery-tricks-notes-and-best-practices/
有关 jQuery 的最佳实践，请阅读有关 jQuery 最佳实践的 NetTuts+ 文章：http://net.tutsplus.com/tutorials/javascript-ajax/14-helpful-jquery-tricks-notes-and-best-practices/
