使用动态数据自动刷新div

I have a div section. I want to reload this section every 5 seconds. How do I do this. Here is my code:

我有一个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>

I have created one more controller for refreshing the div I have used the time interval function but it is not loading, it shows this error:

我已经创建了一个用于刷新div的控制器我已经使用了时间间隔功能但它没有加载,它显示了这个错误:

Access forbidden! You don't have permission to access the requested object. It is either read-protected or not readable by the server. If you think this is a server error, please contact the webmaster. Error 403 I need to refresh only the div content not the whole page. How do I achieve this?

访问被禁止!您无权访问请求的对象。它受读保护或服务器无法读取。如果您认为这是服务器错误,请与网站管理员联系。错误403我只需要刷新div内容而不是整个页面。我该如何实现这一目标?

3 个解决方案

#1

You can Use :

您可以使用 :

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

Replace Your_Function with your Function Name.

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

Hope this will help !!

希望这会有所帮助!!

#2

you can also try below one:

你也可以尝试下面一个:

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

setInterval approach will be more accurate than the setTimeout approach

setInterval方法将比setTimeout方法更准确

// or

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

#3

Below is an example which will update the contents in every 5 seconds using php websockets. This is a simple example, but you can use it to modify to fit for your application needs. You don't need the timeout functions on the client side here we use server sleep

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

Install the Workerman socket library

安装Workerman套接字库

composer require workerman/workerman

The client side code

客户端代码

    <!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>

The Server side code

服务器端代码

<?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();

The backend service can be started with the following command from the terminal or you can autostart on boot if you want.

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

$php index.php start

Here index.php is our backendnd file name.

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

Just start the service and load the page then you can see the timestamp is updated every 5 seconds which comes from the server side. This is a working example tested on my local machine. Try and let me know if you need any other help.

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

The output

#1