使用 jquery 计时器重新加载 Div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5384708/
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
Reload a Div with jquery timer
提问by Rhonda
I am trying to refresh a div on a page with the server name the page is being displayed from. This is just for test so we can test what happens when a auth cookie times out. I want to do this with jquery but I can't seem to get anything working. I found an example online that I have been working on but keep getting errors with it as well.
我正在尝试使用显示页面的服务器名称刷新页面上的 div。这只是为了测试，所以我们可以测试当 auth cookie 超时时会发生什么。我想用 jquery 做到这一点，但我似乎无法得到任何工作。我在网上找到了一个我一直在研究的例子，但也不断出现错误。
We have an html page on each of our servers that just contains the server name. It is the text from that page that we want displayed in the div.
我们在每台服务器上都有一个 html 页面，其中只包含服务器名称。这是我们想要在 div 中显示的那个页面的文本。
Below is the code sample that I found. Can someone help me? I'm pretty new to jquery. Any help would be greatly appreciated.
下面是我找到的代码示例。有人能帮我吗？我对 jquery 很陌生。任何帮助将不胜感激。
Thanks,
谢谢，
`
`
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.ui/1.8.5/jquery-ui.min.js"></script>
<script src="../Scripts/jquery-1.2.6.min.js" type="text/javascript"></script>
<script src="../Scripts/jquery.timers-1.0.0.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
var j = jQuery.noConflict();
j(document).ready(function () {
j(".refreshMe").everyTime(5000, function (i) {
j.ajax({
url: "refresh.html",
cache: false,
success: function (html) {
j(".refreshMe").html(html);
}
})
})
});
j('.refreshMe').css({ color: "red" });
});
</script>
`
`
回答by moe
Try this:
尝试这个：
$(document).ready(function () {
var interval = 500; //number of mili seconds between each call
var refresh = function() {
$.ajax({
url: "path/to/server/page.php",
cache: false,
success: function(html) {
$('#server-name').html(html);
setTimeout(function() {
refresh();
}, interval);
}
});
};
refresh();
});
<div id="server-name"></div>
So what is happening?
那么发生了什么？
I will call refreshonce the page is ready, then an ajax call is made to path/to/server/page.phpwhich will return the desired result.
refresh一旦页面准备好，我将调用，然后进行 ajax 调用，该调用path/to/server/page.php将返回所需的结果。
I show the results in div#server-namethen I do a setTimeoutwhich will call refreshagain every intervalmili seconds.
我显示结果div#server-name然后我做一个每毫秒再次setTimeout调用refresh一次interval。
回答by GregB
Rhonda,
朗达，
Here's another example that you could try. Are you using MVC or ASP.NET WebForms?
这是您可以尝试的另一个示例。您使用的是 MVC 还是 ASP.NET WebForms？
<html>
<head>
<script type="text/javascript" src="jquery-1.5.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var timer = setInterval( updateDiv, 5000);
var counter = 0; //only here so we can see that the div is being updated if the same error is thrown
function updateDiv() {
var messageDiv = $('#content');
$.ajax({
type: 'GET',
async: false,
url: "your.site.com/path/page.ext",
cache: false,
success: function(result) {
counter++;
messageDiv.empty();
messageDiv.append(result);
messageDiv.append("<br />");
messageDiv.append("counter = " + counter);
},
error: function(xhr, ajaxOptions, thrownError) {
counter++;
messageDiv.empty();
messageDiv.append("thrown error: " + thrownError);
messageDiv.append("<br />");
messageDiv.append("status text: " + xhr.statusText);
messageDiv.append("<br />");
messageDiv.append("counter = " + counter);
}
});
}
});
</script>
</head>
<body>
<h2>Div is below here</h2>
<div id="content"></div>
</body>
</html>
