javascript 无需刷新页面实时更新
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29397738/
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
Real time update without refreshing the page
提问by Hurricane Development
I would like to know the solution on how to make my PHP webpage/table update itself automatically in real time without having to refresh the page. The page works perfectly fine.
我想知道如何让我的 PHP 网页/表格自动实时更新而无需刷新页面的解决方案。该页面工作得很好。
For example, If a user submits data this page will update itself automatically displaying the new users data. I have made research and it involves ajax. I have tried some attempts but it messes up the page. Any assistance would be kindly appreciated.
例如，如果用户提交数据，此页面将自动更新，显示新用户数据。我进行了研究，它涉及 ajax。我尝试了一些尝试，但它弄乱了页面。任何帮助将不胜感激。
<html>
<head>
<title>Seminar Overview</title>
</head>
<h1><center>Seminar Overview</center>
<body background="cloud.png">
<h4><p><a href="add.php">Create Seminar</a></p><h4>
<h4><p><a href="index.php">Admin Login</a></p><h4>
<center>
<?php
//DISABLE ERRORS
error_reporting(E_ERROR);
//ESTABLISH DATABASE SERVER CONNECTION
$con = mysql_connect ("194.81.104.22", "", "");
if (!$con) {
die("Can not connect: " . mysql_error());
}
//MYSQL QUERY & DATABASE SCHEMA
mysql_select_db("db12408543", $con);
$sql = "SELECT * FROM Register";
$seminaroverview = mysql_query($sql,$con);
$data = mysql_query($sql,$con);
//TABLE
echo "<table border=4 table width=1000>
<tr>
<th>Student ID</th>
<th>Name</th>
<th>Surname</th>
<th>Telephone</th>
<th>Address</th>
<th>Date of Registration</th>
<th>Email</th>
<th>Registered Seminar(s)</th>
</tr>";
//MYSQL DATA TO BE DISPLAYED THROUGH PHP TABLE
while($record = mysql_fetch_array($data)) {
echo "<tr>";
echo "<td>" . $record['idRegister'] . "</td>";
echo "<td>" . $record['Name'] . "</td>";
echo "<td>" . $record['Surname'] . "</td>";
echo "<td>" . $record['Telephone'] . "</td>";
echo "<td>" . $record['Address'] . "</td>";
echo "<td>" . $record['Dateofregistration'] . "</td>";
echo "<td>" . $record['email'] . "</td>";
echo "<td>" . $record['SeminarAttended'] . "</td>";
echo "</tr>";
}
echo "</table>";
mysql_close($con);
?>
</center>
</body>
</html>
Real time attempt
实时尝试
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
$(document).ready(function() {
setInterval(function() { // set Interval function to carry out same operation in the time specified
$('#main').load('seminar-overview.php #main > *'); // Reloads 'seminar-overview.php' table every 6 seconds as <div> tag is specified and closed after table
}, 6000);
});
</script>
回答by Hurricane Development
OK, so after you populate your table for the first time you will need to send the form data to another PHP page via an ajax request. The example js code below (using jQuery) will execute a new PHP page with POST variables from a form named #updatePage. Then it will set the table contents to the pages output. Here it is:
好的，所以在您第一次填充表格后，您需要通过 ajax 请求将表单数据发送到另一个 PHP 页面。下面的示例 js 代码（使用 jQuery）将从名为#updatePage. 然后它将表格内容设置为页面输出。这里是：
$('#updatePage').submit(function(event) {
event.preventDefault();
var form = $(this);
$.ajax({
url: "/path/to/script.php",
data: form.serialize(),
type: 'post',
dataType: 'html',
success: function(data) {
$('table').html(data);
},
error: function(xhr, status) {
alert("Sorry, there was a problem!");
},
});
});
The script.php might look something like this:
script.php 可能看起来像这样：
<?php
$newData = //MySQL functions to get data using POST vars
echo "
<tr>
<td>" . $newData . "</td>
</tr>
";
?>
That's the basic idea and you should be able to modify your code to make this work.
这是基本思想，您应该能够修改代码以使其工作。
