Question

我希望每隔两到三秒或实时更新一张桌子。我知道一种方法可以做到这一点，但是当我尝试它时，它会使桌子不断闪烁，这样做会非常难以阅读并伤害你的眼睛。我应该使用jQuery和Ajax吗？如果没有非常大的资源并且导致网页最终崩溃，我将如何实现呢？我的表格代码如下（在table.php中）：

<!-- Table -->

<form action="index.php" method="get" id="dispatch">



         <table>
             <thead>
             <tr>
                 <th>Incident #</th>
                 <th>Town</th>
                 <th>Location</th>
                 <th>Incident Type</th>
                 <th>Time/Date</th>
                 <th>Admin</th>
                 <th>Delete Entry</th>
            </tr>
             </thead>
             <tbody>
             <?php


  if( isset($_POST['town']) )
  {
    $town = $_POST['town'];
  }

  if( isset($_POST['location']) )
  {
  $location = $_POST['location'];
  }

  if( isset($_POST['incident_type']) )
  {
  $incident_type= $_POST['incident_type'];
  }

  if( isset($_POST['time_date']) )
  {
  $time_date= $_POST['time_date'];
  }

  if( isset($_POST['admin']) )
  {
  $admin = $_POST['admin'];
  }

  if( isset($_POST['id']) )
  {
  $id = $_POST['id'];
  }



    $db = mysqli_connect('localhost','root','') or die("Database error"); 
    mysqli_select_db($db, 'cad');  
    $result= mysqli_query($db, "SELECT * FROM `cad` ORDER BY `time_date` DESC LIMIT 20"); 


  while($row = mysqli_fetch_array($result))
    {

  $town     = $row['town'];
  $location    = $row['location'];
  $incident_type     = $row['incident_type'];
  $time_date = $row['time_date'];
  $admin    = $row['admin']; 
  $id    = $row['id']; 

echo "


                    <tr>
                        <td class=\"id-center\">
                            ".$id."
                        </td>
                        <td >
                            ".$town."
                        </td>
                        <td>
                            ".$location."
                        </td>
                        <td >
                            ".$incident_type."
                        </td>
                        <td >
                            ".$time_date."
                        </td>
                        <td >
                            ".$admin."
                        </td>


                        <td>
                        <a href=\"delete.php?id=$id\" onclick=\"return confirm('Are you sure you want to delete this incident?');\" name=\"delete\" value=\"$id\" class=\"btn btn-primary btn-default center-1\"><span class=\"glyphicon glyphicon-trash\"></span></a>
                        </td> 


                        </tr>";
    }

  mysqli_close($db);


  ?>

             </tbody>
             </table> 
             </form>

<!-- End -->

我的index.php代码：

<!-- Table -->

<div class="col-md-8 column">



     <fieldset>
        <legend>Incident Board (Incidents in red are active)</legend>

         <iframe class="incident-table" src="table.php" name="incident-table" width="100%" height="500px" style="border:0;"></iframe>


    </fieldset>
             </div>

<!-- End -->

Answer 1

使用JAX实现低带宽的最佳方式是使用JSON。尝试获取所有表格数据的JSON输出，并且每2秒，触发一次AJAX调用以获取新数据并填充它。

您的AJAX调用将是这样的：

$.getJSON("path/to/php/json", function (data) {
  $("table").find("#id_of_element").html(data.id_of_element);
});

您的表格的一个特定行可以返回如下：

{
    "Incident": "",
    "Town": "",
    "Location": "",
    "IncidentType": "",
    "Time/Date": "",
    "Admin": "",
    "Delete Entry": ""
}

当它缩小时，它会告诉你：

{"Incident":"","Town":"","Location":"","IncidentType":"","Time/Date":"","Admin":"","Delete Entry":""}

服务器开销非常小！

每两秒更新一次表

1 个答案: