在网页中实时显示 MySQL 表答案

【问题标题】：Displaying a MySQL Table in Real Time in a Webpage在网页中实时显示 MySQL 表
【发布时间】：2018-12-01 19:05:41
【问题描述】：

我有一个不断更新的 MySQL 表，它的行数少于 10。是否可以在网页中实时显示此表格？我听说可以使用ajax 来完成，到目前为止我看到的所有示例仍然非常混乱。到目前为止，我只使用 PHP 在网页中显示了一个静态表格，代码如下：

<table>
<tr>
  <th>User ID</th>
  <th>Current Location</th>
</tr>
<?php
define('DB_SERVER', 'localhost');
define('DB_USERNAME', 'root');
define('DB_PASSWORD', '');
define('DB_NAME','test1');

$link=mysqli_connect(DB_SERVER,DB_USERNAME,DB_PASSWORD,DB_NAME);

if($link===false){
    die("ERROR: Could not connect.". mysqli_connect_error());
}
$sql = "select * from last_seen";
$result = mysqli_query($link,$sql);
if($result->num_rows>0){
  while($row=$result->fetch_assoc()){
    echo "<tr><td>".$row["user_id"]."</td><td>".$row["location"]."</td></tr>";
  }
  echo "</table>";
}
else{
  echo "0 Results";
}
?>

但是我还没有找到不刷新页面就可以实时更新的方法。我要显示的表格如下：

user_id  location
-------  --------
1        room1
2        room2
3        room1

【问题讨论】：

首先，您需要在客户端和服务器之间建立永久连接，这显然超出了 php.ini 的范围。其次，您需要能够主动将表中的更改推送到客户端，这也是服务器端解决方案无法提供的。所以你肯定需要客户端逻辑。您可以使用 ajax 请求和轮询，或长轮询策略或 websockets 在发生更新时从服务器接收更新。然后就可以在客户端更新已有的表了。
套接字。事件源。阿贾克斯。方法有很多种，各有利弊，你最好自己研究一下，看看哪一种最适合你。
只是谷歌关于 SSE（服务器发送事件）。服务器将向客户端发送推送消息。

标签： php mysql ajax

【解决方案1】：

为什么不直接用 jQuery 将输入的数据附加到表格中呢？这样它仍然会显示您插入的内容而无需浪费带宽？

编辑-

哦，等等，我忘了您可能需要 ID 来执行更新/删除操作。我建议将该表的逻辑放在不同的 PHP 脚本中，比如 table.php，然后使用对该脚本的 AJAX 调用来刷新该“容器”？

编辑 #2 -

抱歉，我应该举个例子来说明我在说什么。

假设您的表在中，我建议使用一个单独的 PHP 脚本（称为 table.php）来实际为您构建此表（我会在您最初加载页面时将此脚本包含在主脚本中）。

将以下函数添加到您的 JS...

function getNewTable() {
    $("#data-table").load("table.php");
}

更新数据后，调用 getNewTable() 即可。希望对您有所帮助！

【讨论】：

【解决方案2】：

您可以将其用作单独页面并使用它调用 ajax，

table_data.php

<table>
<tr>
  <th>User ID</th>
  <th>Current Location</th>
</tr>
<?php
define('DB_SERVER', 'localhost');
define('DB_USERNAME', 'root');
define('DB_PASSWORD', '');
define('DB_NAME','test1');

$link=mysqli_connect(DB_SERVER,DB_USERNAME,DB_PASSWORD,DB_NAME);

if($link===false){
    die("ERROR: Could not connect.". mysqli_connect_error());
}
$sql = "select * from last_seen";
$result = mysqli_query($link,$sql);
if($result->num_rows>0){
  while($row=$result->fetch_assoc()){
    echo "<tr><td>".$row["user_id"]."</td><td>".$row["location"]."</td></tr>";
  }
  echo "</table>";
}
else{
  echo "0 Results";
}
?>

和主文件 index.php

<h1>Table Data</h1>
<div id="table_data"></div>

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
    var RefreshTimerInterval = 5000; // every 5 seconds
    $(document).ready(getData);

    function getData() {
        $.get('table_data.php', function(result) {
             $('#table_data').html(result);

             setTimeout(getData, RefreshTimerInterval);
        }
    }
</script>

【讨论】：

这不是一个好主意，现在使用任何 UI 框架，如 angular、backbone ... 等