php 每 5 秒用 jQuery/Ajax 刷新一个表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5681380/
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
Refresh a table with jQuery/Ajax every 5 seconds
提问by Ben Cobbold
So I have a table pulling information from a database and I was wondering how I could make it refresh its information without reloading the whole page.
所以我有一个从数据库中提取信息的表，我想知道如何在不重新加载整个页面的情况下刷新它的信息。
回答by Dutchie432
You'll need a getTable.phppage that displays your table, and nothing else: no headers, footers, etc.
您需要一个getTable.php页面来显示您的表格，而没有其他内容：没有页眉、页脚等。
PHP (getTable.php) - this can be any server side code (asp, html, etc..)
PHP (getTable.php) - 这可以是任何服务器端代码（asp、html 等）
<?php
echo '<table><tr><td>TEST</td></tr></table>';
?>
Then, in your JS, you can easily refresh the table by using the load()method:
然后，在您的 JS 中，您可以使用以下load()方法轻松刷新表：
HTML
HTML
<div id="tableHolder"></div>
JS
JS
<script type="text/javascript">
$(document).ready(function(){
refreshTable();
});
function refreshTable(){
$('#tableHolder').load('getTable.php', function(){
setTimeout(refreshTable, 5000);
});
}
</script>
回答by Jeff Lambert
Use ajax, following example is in jQuery:
使用 ajax，以下示例在 jQuery 中：
$(function() {
var prevAjaxReturned = true;
var xhr = null;
setInterval(function() {
if( prevAjaxReturned ) {
prevAjaxReturned = false;
} else if( xhr ) {
xhr.abort( );
}
xhr = $.ajax({
type: "GET",
data: "v1="+v1+"&v2="+v2,
url: "location/of/server/script.php",
success: function(html) {
// html is a string of all output of the server script.
$("#element").html(html);
prevAjaxReturned = true;
}
});
}, 5000);
});
The success function assumes that your server script outputs the html that you want to replace in the element with id 'element'.
成功函数假定您的服务器脚本输出您要在元素中替换为 id 'element' 的 html。
回答by Etienne Dupuis
You should have a page that return the information and pull data using Ajax / jQuery.
您应该有一个使用 Ajax/jQuery 返回信息和提取数据的页面。
<div class="result"></div>
setInterval(function() {
$.get('table.php', function(data) {
$('#result').html(data);
});
}, 5000);
回答by Kyle Rogers
Here is another option for you to use. This solution is using an IIFEwhich is preferred over setInterval. You can read more about IIFE at the link above.
这是您可以使用的另一种选择。此解决方案使用的是优于 setInterval的IIFE。您可以在上面的链接中阅读有关 IIFE 的更多信息。
JAVASCRIPT:
爪哇脚本：
var $results = $('#results'),
loadInterval = 5000;
(function loader() {
$.get('script.php', function(html){
$results.hide(200, function() {
$results.empty();
$results.html(html);
$results.show(200, function() {
setTimeout(loader, loadInterval);
});
});
});
})();
HTML:
HTML：
<div id="results"></div>
回答by Eric Frick
setTimeout(function(){
jqueryFunction(Args);
},100);
will work...
将工作...
100 = 100 milliseconds
100 = 100 毫秒
回答by wrgoff
The following works with JQuery Datatables 1.10
以下适用于 JQuery 数据表 1.10
`var tableName;
//Set AJAX Refresh interval.
$(function() {
setReloadInterval(10); //Refresh every 10 seconds.
}
//Because function takes seconds we * 1000 to convert seconds to milliseconds.
function setReloadInterval(reloadTime) {
if(reloadTime > 0)
internalId = setInterval("reloadTable()", (reloadTime * 1000);
}
//Auto Refresh JQuery DataTable
function reloadTable() {
tableName.ajax.reload();
}
//Table defined...
$(document).ready(function () {
tableName = $('#tableName').DataTable({
"sAjaxSource": "/someUrl",
});`
