实时更新,无需刷新页面
我想知道如何使我的PHP网页/表更新本身自动实时自动,而无需刷新页面的解决方案。该页面工作得很好。实时更新,无需刷新页面
例如,如果用户提交数据,该页面将自动更新以自动显示新的用户数据。我做了研究,涉及到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>
实时试图
<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>
OK,等你以后填充表格的第一次,你需要通过Ajax请求表单数据发送到另一个PHP页面。下面的示例js代码(使用jQuery)将从名为#updatePage
的表单执行一个带有POST变量的新PHP页面。然后它会将表格内容设置为页面输出。那就是:
$('#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!");
},
});
});
的script.php的可能是这个样子:
<?php
$newData = //MySQL functions to get data using POST vars
echo "
<tr>
<td>" . $newData . "</td>
</tr>
";
?>
这是基本的想法,你应该可以修改代码以使这项工作。
除了使用'ajax'向另一个脚本发送请求,我们不能使用Jquery函数'$ .post(url [,data] [,success] [,dataType])''吗? – Ikari 2015-04-01 18:27:04
是的,如果你看看[jQuery文档](https://api.jquery.com/jquery.post/),它说'$ .post'是“一个简短的Ajax函数”,并且简单地设置了ajax调用为你。 – 2015-04-01 18:31:29
是的!我使用它,因为它简化了一切。但我也认为AJAX提供了很多功能! – Ikari 2015-04-01 18:34:59
本示例中没有javascript或ajax。如果您希望人们提供帮助,您需要提供一些您已尝试过的示例 – nomistic 2015-04-01 18:10:04
AngularJS将允许您使用SPA的单页应用程序,并且不需要刷新页面以进行更改。它通过$ digest通过DOM层次结构的“双向数据绑定”完成。 – user1789573 2015-04-01 18:10:42
您可以[在Ajax中进行长轮询](http://techoctave.com/c7/posts/60-simple-long-polling-example-with-javascript-and-jquery)或者使用类似'Node.JS '做实时更新 – D4V1D 2015-04-01 18:11:34