Javascript 如何在不刷新整个html页面的情况下刷新动态表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/39072364/
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 Refresh a dynamic table without refreshing the whole html page
提问by kkambi
I have a dynamic table that displays data from a mysql database. My database is updated every time in the server. I want to refresh only the table every 2 seconds without refreshing the whole page. How can do this? Please help how accomplish this?. Parts of my table look like this:
我有一个动态表，显示来自 mysql 数据库的数据。我的数据库每次都在服务器中更新。我只想每 2 秒刷新一次表格而不刷新整个页面。怎么能做到这一点？请帮助如何做到这一点？我的表的部分看起来像这样：
<table id="getdata" border="0" align="left" cellpadding="0" cellspacing="0">
<tr>
<td bgcolor="#CCFF00">Name</td>
<td bgcolor="#CCFF00">Comment</td>
<td bgcolor="#CCFF00">DatePosted</td>
</tr>
</table>回答by Peter
You will need to use a client-side scripting language such as javascript in order to be able to refresh certain contents on your HTML page. A very common library that is used is jQuery.
您将需要使用客户端脚本语言（例如 javascript）才能刷新 HTML 页面上的某些内容。一个非常常用的库是 jQuery。
PHP
PHP
# ajax.php
$contents = '<table class="table table-hover">
<thead>
<tr>
<th>Sound</th>
</tr>
</thead>
<tbody>
<tr>
<td>Bzzz Bzz</td>
</tr>
</tbody>
</table>';
echo json_encode($content);
HTML/Javascript
HTML/Javascript
<button class="refresher">Refresh table</button>
<table id="table-to-refresh">
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
<script type="text/javascript">
$(document).ready(function () {
$(document).on('click', '.refresher', function () {
$.ajax({
url: 'ajax.php',
method: get,
dataType: 'json',
success: function(response) {
$('#table-to-refresh').html(response);
}
});
});
});
</script>
Additional reading
补充阅读
回答by Pratiksha Vaishnav
just do this:
只需这样做：
$.ajax({
contentType: contentType,
dataType: dataType,
type: type,
url: urlGetsearch,
data: '{textvalue: "' + $("#tableId").val() + '" }',
success: function (textvalue) {
$("#tableId").html(htmlData);
},
});
}
The controller is look like this:-
控制器看起来像这样：-
[HttpPost]
public ActionResult Getsearch(string textvalue)
{
your code.....
}
回答by Mayank Pandeyz
Use ajax on an specified time interval like:
在指定的时间间隔内使用 ajax，例如：
$.ajax({
url: 'your_url',
method: get,
data:
{
var1 : val1
},
success: function(response)
{
$('#getdata').html(response); // it will update the html of table body
}
});
回答by Amit Kumar Pawar
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript">
var auto_refresh = setInterval(
function ()
{
$('#load_tweets').load('file.php').fadeIn("slow");
}, 10000); // refresh every 10000 milliseconds
</script>
in file put your full html and php sql code like full code by which you are generating that table.
在文件中放入完整的 html 和 php sql 代码，就像生成该表的完整代码一样。
check this for refrence http://www.9lessons.info/2009/07/auto-load-refresh-every-10-seconds-with.html
检查这个参考http://www.9lessons.info/2009/07/auto-load-refresh-every-10-seconds-with.html
