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

Posted 2023-04-18

【中文标题】如何在 JQuery 中显示动态更新的数据

【英文标题】：How to display dynamically updated data in JQuery

【发布时间】：2016-12-20 23:03:33

【问题描述】：

我正在尝试显示数据库中有多少行。这应该是动态更新的，所以当行数改变时，显示的数字也会更新。我尝试用 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);

【问题讨论】：

“动态”是指当服务器上的数据库更改时计数应自动更改，还是应显示在页面上某处并每两秒更新一次（当您进行 ajax 调用时） ?

【参考方案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 那里得到了很多上述信息。然而，那里的一些信息已经过时了几年，并且那里的最高评价的答案并没有提供当今最好的解决方案。

【参考方案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 请求的垃圾邮件，具体取决于您的用户群，这可能需要考虑。

【讨论】：

这不会是“动态的”。我认为 vonder 希望在客户端上实时更新计数。

@charsi - 每次发出 AJAX 请求时都会更新。 OP 已经在使用 $.ajax 方法，因此在他们已经作为解决方案的基础上构建是有意义的。

从他的问题来看，他似乎希望它自动更新而无需任何进一步的 ajax 调用。我已请他澄清是否是这样。

@charsi - 他在 setTimeout 上有 AJAX 请求，因此他正在轮询服务器以获取任何新的更新行。我相信 OP 正在努力在文档对象模型中显示请求的内容，因此我的回答是。我还指出，每 2 秒轮询一次服务器可能不是最有效的。

是的，你是对的。我刚刚看到他正在使用超时来进行 ajax 调用。