使用动态数据自动刷新 div答案

【问题标题】：auto refresh the div with dynamic data使用动态数据自动刷新 div
【发布时间】：2018-05-28 06:23:43
【问题描述】：

我有一个 div 部分。我想每 5 秒重新加载此部分。我该怎么做呢。这是我的代码：

<script>
    $("#send_parent_general_chat").submit(function() 
        {
            var rec = $("#data").val();
            var msg = $("#msg").val();
            var dataString = 'rec='+ rec + '&msg='+ msg;

            $.ajax({
                type: "POST",
                url: "<?php echo base_url(); ?>" + "Client/send_general_parent_chat_msg/<?php echo $per_job->id;?>",
                data: dataString,
                cache: false,
                success: function(result){
                    $('#display_general_msg').html(result);
                    $('#send_parent_general_chat')[0].reset(); //form reset

                }
            });
            return false;
        }); 
</script>


<script>
    $(document).ready(function(){
        setInterval(function(){
            //  alert("===111==");
            $("#display_general_msg").load('<?php echo base_url(); ?>" + "Client/refresh_general_parent_chat_msg/<?php echo $per_job->id;?>')
        }, 5000);
    });
</script>

我又创建了一个控制器来刷新 div 我使用了时间间隔功能但它没有加载，它显示了这个错误：

禁止访问！您无权访问请求的对象。它要么是读保护的，要么是服务器不可读的。如果您认为这是服务器错误，请联系网站管理员。错误 403 我只需要刷新 div 内容而不是整个页面。我如何做到这一点？

【问题讨论】：

我建议将 websockets 用于此类应用程序。它将保护您的服务器和所有用户的大量网络流量。
由于您的任务处理的时间间隔很短，因此可能会占用大量 CPU。我建议在这种情况下使用 setTimeout 而不是 setInterval
看看reallifejs.com/brainchunks/repeated-events-timeout-or-interval
首先通过在浏览器中输入url来检查给定的url是否正常打开。
使用 websockets 将是最好的方法，因为它与服务器有持久连接。

标签： php jquery ajax

【解决方案1】：

你可以使用：

setTimeout(function()
{
  Your_Function(); //this will send request again and again;
}, 5000);

将Your_Function 替换为您的函数名称。

希望这会有所帮助！

【讨论】：

@JYoThI 不，也可以使用 setTimeout 为重复事件创建轮询函数。事实上 setTimeout 对于 CPU 密集型任务和短时间间隔更方便

【解决方案2】：

下面是一个使用 php websockets 每 5 秒更新一次内容的示例。这是一个简单的示例，但您可以使用它进行修改以适应您的应用程序需求。客户端不需要超时功能，这里我们使用服务器sleep

安装Workerman socket library

composer require workerman/workerman

客户端代码

    <!DOCTYPE HTML>

<html>
   <head>

      <script type = "text/javascript">
         function WebSocketTest() {

            if ("WebSocket" in window) {
               //alert("WebSocket is supported by your Browser!");

               // Let us open a web socket
               var ws = new WebSocket("ws://localhost:2346");

               ws.onopen = function() {

                  // Web Socket is connected, send data using send()
                  ws.send("Message to send");
                  //alert("Message is sent...");
               };

               ws.onmessage = function (evt) { 
                  var received_msg = evt.data;
                  //alert("Message is received..." + received_msg);
                  document.getElementById("demo").innerHTML = "Timestamp is updated every 5 sec " +received_msg;
               };

               ws.onclose = function() { 

                  // websocket is closed.
                  alert("Connection is closed..."); 
               };
            } else {

               // The browser doesn't support WebSocket
               alert("WebSocket NOT supported by your Browser!");
            }
         }

      </script>

   </head>

   <body>
      <div id = "sse">
         <a href = "javascript:WebSocketTest()">Run WebSocket</a>
      </div>
      <div id="demo" style="font-size: 64px; color: red;"></div>

   </body>
</html>

服务器端代码

<?php
require_once __DIR__ . '/vendor/autoload.php';
use Workerman\Worker;

// Create a Websocket server
$ws_worker = new Worker("websocket://0.0.0.0:2346");

// 4 processes
$ws_worker->count = 4;

// Emitted when new connection come
$ws_worker->onConnect = function($connection)
{
    echo "New connection\n";
 };

// Emitted when data received
$ws_worker->onMessage = function($connection, $data)
{
    // Send hello $data
    while(true) {
        $connection->send(time());
        sleep(5); //Sleep for 5 seconds to send another message.
    }

};

// Emitted when connection closed
$ws_worker->onClose = function($connection)
{
    echo "Connection closed\n";
};

// Run worker
Worker::runAll();

后端服务可以在终端使用以下命令启动，也可以根据需要在启动时自动启动。

$php index.php start

这里index.php是我们的后端文件名。

只需启动服务并加载页面，您就可以看到来自服务器端的时间戳每 5 秒更新一次。这是在我的本地机器上测试的工作示例。如果您需要任何其他帮助，请尝试告诉我。

输出

【讨论】：

【解决方案3】：

您也可以尝试以下一种：

setInterval(function(){
   loadlink() // this will run after every 5 seconds
}, 5000);

setInterval 方法会比 setTimeout 方法更准确

// 或

  $(function(){  // document.ready function...
    setTimeout(function(){
      $('form').submit();
      },5000);
 });

【讨论】：

我试过这样 function reload_div() { $("#send_parent_general_chat").submit(function() { //data });} setTimeout(function(){ reload_div(); / /这将一次又一次地发送请求；}, 5000);但它不工作
试试这个：function reload_div() { $("#send_parent_general_chat").submit(function() { alert("") }); } setInterval(function(){ reload_div(); }, 5000);
仅在警报打印时
去掉表单提交代码末尾的 return false。