Question

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

Answer 1

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

这是基本的想法，你应该能够修改你的代码以使其发挥作用。

无需刷新页面即可实时更新

1 个答案: