如何在 JQuery 中显示动态更新的数据

Question

我正在尝试显示数据库中有多少行。这应该是动态更新的，所以当行数改变时，显示的数字也会更新。我尝试用 PHP 打印它，但它不是动态的。

这是索引文件：

  <script>
      $(document).ready(function() {
          setInterval("ajaxcall()",2000);
      });

      function ajaxcall() {
       $.ajax({
       type: "GET",
       url: "count.php"
       success: function(response){
           json_object = JSON.parse(response)
           var count = json_object.count

       // HOW TO DISPLAY COUNT SO IT IS DYNAMIC
       }
       });
       }
       </script>

这里是count.php

$num_rows = mysql_num_rows($result);
echo json_encode($num_rows);

Answer 1

你需要 -

• 定期进行 ajax 调用以检查更新的值。（这是您当前正在执行的操作。） -- 如果用户要连接很长时间，这通常是个坏主意。
• 或者，更好的解决方案是改用HTML5 web sockets。

socket.io 之类的项目使在 javascript 服务器（节点）上实现 websocket 变得非常容易。但是 PHP 也有一些选择。 -

• Ratchet - 与 socket.io 类似，但为 PHP 构建。
• Elephant.io - 也是 websockets 的 PHP 实现，但它是一个 ws“客户端”，用于在服务器上工作。因此，您可能还必须在服务器上部署 node 和 socket.io，并使用大象.io 驱动它来处理与其他客户端的 websocket 通信。
• phpsocket.io - “基于 Workerman 的 PHP 中 socket.io 的服务器端替代实现。” - 根据其 github 页面。

关于 phpsocket.io 的文档不多，但从其自述文件中的示例来看，API 看起来很简单。像这样的东西应该对你有用--

<?
use PHPSocketIO\SocketIO;

// listen port 2021 for socket.io client
$io = new SocketIO(2021);
$io->on('connection', function($socket)use($io){
    $socket->on('get count', function($msg)use($io){
        $num_rows = mysql_num_rows($result);
        $io->emit($num_rows, $msg);
    });
});

在客户端--

var count = 0;
// check if browser supports websockets
if ("WebSocket" in window) {
    var ws = new WebSocket("ws://yourdomain.com:2021/");
    ws.onopen = function() {
        // Web Socket is connected, send data using send()
        ws.send("get count");
    };
    ws.onmessage = function (evt) { 
            var received_msg = evt.data;
            json_object = JSON.parse(response)
            count = json_object.count
            $("#database-results").text(count);
    };
}

*免责声明——我之前没有测试过上面的代码或使用过 phpsocket.io 库。所以代码可能不起作用。此外，Ratchet 看起来是一个更成熟的项目，因此如果您想要为您的应用程序提供更强大的解决方案，您应该进一步研究它。

我从this 那里得到了很多上述信息。然而，那里的一些信息已经过时了几年，并且那里的最高评价的答案并没有提供当今最好的解决方案。

Answer 2

您可以使用来自AJAX 响应的count 变量更新 DOM 元素。

类似于以下内容：

<span id="database-results">
</span>

然后在您的 AJAX 成功调用中，将 count 变量附加到 HTML 元素：

success: function(response) {
          json_object = JSON.parse(response)
          var count = json_object.count

          $("#database-results").text(count);
}

作为附加说明，您将每 2 秒向服务器发送一次 AJAX 请求的垃圾邮件，具体取决于您的用户群，这可能需要考虑。