Javascript 实时更新，无需刷新页面_Javascript_Php_Html_Ajax

Javascript 实时更新，无需刷新页面

javascript php html ajax

Javascript 实时更新，无需刷新页面,javascript,php,html,ajax,Javascript,Php,Html,Ajax,我想知道如何让我的PHP网页/表格在不刷新页面的情况下自动实时更新。这一页很好用例如，如果用户提交数据，此页面将自动更新自身，显示新用户数据。我做过研究，它涉及ajax。我尝试了一些尝试，但它弄乱了页面。如有任何帮助，将不胜感激 <html> <head> <title>Seminar Overview</title> </head> <h1><center>Seminar Overview</

我想知道如何让我的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>


研讨会概况
研讨会概况

实时尝试


$（文档）.ready（函数（）{
setInterval（function（）{//将Interval函数设置为在指定的时间内执行相同的操作
$（'#main'）.load（'seminar-overview.php#main>*'）；//每6秒重新加载一次'seminar overview.php'表，因为在表之后指定并关闭了标记
}, 6000);
});

好的，所以在第一次填充表之后，您需要通过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>
";
?>

这是最基本的想法，您应该能够修改代码来实现这一点。

本示例中没有javascript或ajax。如果您希望人们提供帮助，您需要提供一些示例，这些示例可以让您利用SPA的单页应用程序，而不需要您刷新页面进行更改。它是通过“双向数据绑定”实现的通过$digest通过DOM层次结构。您可以执行或使用类似于

Node.JS的操作来执行实时更新^。JS@nomistic看看我给出的示例，除了使用ajax
发送请求另一个脚本，难道我们不能使用Jquery函数$.post（url[，data][，success][，dataType]）
？是的，如果你看一下，它说$.post是一个“速记Ajax函数”，只是为你设置Ajax调用。是的！我使用它，因为它简化了一切。但我也认为Ajax提供了很多功能！
<?php
$newData = //MySQL functions to get data using POST vars

echo "
    <tr>
        <td>" . $newData . "</td>
    </tr>
";
?>