如何制作每 10 秒刷新一次的 jquery 表？答案

【问题标题】：How to make jquery table which is refreshing itself in every 10 secs?如何制作每 10 秒刷新一次的 jquery 表？
【发布时间】：2015-01-26 09:47:38
【问题描述】：

我正在制作管理员门户，管理员可以在其中查看当前预订的总数，为此我们必须每 10 秒自动刷新一次表格，并且会有还有刷新按钮，更新表，我使用的是JQuery，Ajax，Json，Spring MVC，这里也是一个问题，当我点击按钮时它会重复信息。所以请帮我让这两个东西自动刷新 Jquery 表表单数据库和 Button 这也刷新信息而不重复信息，提前感谢您的帮助和任何建议，

注意：这是有效的代码，感谢 Prog 和 ChrisH619

<!DOCTYPE html>

<html>    
    <head>
        <title>Service for home - New Page -  Next Generation of Service Provider - Admin Home Page</title>
        <!-- Bootstrap -->
        <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
        <link href="bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet" media="screen">
        <link href="assets/styles.css" rel="stylesheet" media="screen">
        <link href="assets/DT_bootstrap.css" rel="stylesheet" media="screen">
        <!--[if lte IE 8]><script language="javascript" type="text/javascript" src="vendors/flot/excanvas.min.js"></script><![endif]-->
        <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
        <!--[if lt IE 9]>
            <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
        <script src="vendors/modernizr-2.6.2-respond-1.1.0.min.js"></script>    
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
        <script type="text/javascript">

                function fetchData(){
                    $(".data-contacts-js tbody").empty();
                    $.get("http://www.service4homes.com:8080/HomeServiceProvider/booking/getAllBookingDetails", function(data) {
                        $.each(data, function(i, contact) {
                            $(".data-contacts-js").append(
                                "<tr><td>" + contact.custId + "</td>" +
                                "<td>" + contact.custName + "</td>" +
                                "<td>" + contact.custMobile + "</td>" +
                                "<td>" + contact.custEmail + "</td>" +
                                "<td>" + contact.custAddress + "</td>" +
                                "<td>" + contact.Date + "</td>" +
                                "<td>" + contact.Time + "</td></tr>"
                                );
                        });
                    });
                }

            $(document).ready(function(){
                $("#data-contacts-js > tbody").html(""); 
                setInterval(function(){
                    fetchData();
                },10000);  // this will call your fetchData function for every 5 Sec.
            });

             $(document).ready(function(){
                 $("#data-contacts-js > tbody").html("");
                $('#fetchContacts').click(function() {
                     fetchData();
                });
            });

        </script>
    </head>

    <body>        
        <div class="container-fluid">
            <div class="row-fluid">         
                <!--/span-->
                <div class="span9" id="content">


                    <div class="row-fluid">
                        <!-- block -->
                        <div class="block">
                            <div class="navbar navbar-inner block-header">
                                <div class="muted pull-left">Carpenter Services</div>
                            </div>
                            <div class="block-content collapse in">
                                <div class="span12">
                                     <table class="data-contacts-js table table-striped" >
                                      <thead>
                                        <tr>
                                          <th>ID</th>
                                          <th>Customer Name</th>
                                          <th>Customer Mobile</th>
                                          <th>Customer Email</th>
                                          <th>Address</th>
                                          <th>Date</th>
                                          <th>Time</th>
                                          <th>Status</th>
                                        </tr>
                                      </thead>
                                      <tbody>

                                      </tbody>
                                    </table>                                    
                                </div>
                                <button id="fetchContacts" class="btn btn-default" type="submit">Refresh</button>


                            </div>
                        </div>
                        <!-- /block -->
                    </div>


                </div>
            </div>         

        </div>
        <!--/.fluid-container-->

        <script src="vendors/jquery-1.9.1.js"></script>
        <script src="bootstrap/js/bootstrap.min.js"></script>
        <script src="vendors/datatables/js/jquery.dataTables.min.js"></script>


        <script src="assets/scripts.js"></script>
        <script src="assets/DT_bootstrap.js"></script>
        <script>
        $(function() {

        });
        </script>
    </body>

</html>

【问题讨论】：

看起来你正在使用数据表，如果是这样，它有一个内置的方法来刷新它链接到的 AJAX 数据：$('#table').dataTable()._fnAjaxUpdate();
我根据 Prog 和 ChrisH619 更新了代码，它的工作代码。谢谢大家的帮助..

标签： javascript jquery ajax json

【解决方案1】：

改变你的 jQuery：

$(".data-contacts-js").append(

到

$(".data-contacts-js tbody").append( /*This nests properly in html*/

在你之前

 $.each(

记得删除所有的孩子:)

$(".data-contacts-js tbody").empty();
$.each(

如果您想使用完全相同的代码来运行（在刷新时，而不仅仅是在获取时）但要中止：

$(document).ready(function(){
  var getDataTimeoutId = null,
      refetchTime = 10 /* time in seconds */
      isFetching = false,
      getData = function(){
        if (isFetching) {return;}
        if (getDataTimeoutId !== null){
            window.clearTimeout(getDataTimeoutId);
            getDataTimeoutId = null;
        }

        isFetching = true;
        $.get(
          /* ajax get */
        ).success(function(){
            setDataTimeout(); /* Only auto re-get if there wasn't an error */
        }).always(function(){
            isFetching = false; /* always clear the status */
        });
      },
      setDataTimeout = function(){
        getDataTimeoutId = window.setTimeout(function(){
          getData();
        }, refetchTime * 1000);
      };

  $('#fetchContacts').click(function(){
    getData();
  );
  setDataTimeout();
});

这意味着代码将每 10 秒或一次点击运行一次。但不会针对多个挂起的请求敲击服务器。

【讨论】：

注册点击功能的时候给reset the timer大概是个好主意？
@terry 添加了一个重置计时器，只有在没有错误时才会自动获取。

【解决方案2】：

试试下面的代码： - 使用setInterval

第一步：

您应该创建一个通用函数，该函数将从Database 获取所有数据，如下所示。

function fetchData(){
    $(".data-contacts-js tbody").empty(); // this will remove all <tr>.
$.get("http://localhost:8080/Hotels/reservation/getAllBookingDetails", function(data) {
                        $.each(data, function(i, contact) {
                            $(".data-contacts-js").append(
                                "<tr><td>" + contact.custId + "</td>" +
                                "<td>" + contact.custName + "</td>" +
                                "<td>" + contact.custMobile + "</td>" +
                                "<td>" + contact.custEmail + "</td>" +
                                "<td>" + contact.custAddress + "</td>" +
                                "<td>" + contact.Date + "</td>" +
                                "<td>" + contact.Time + "</td></tr>"
                                );
                        });
                    });
}

第 2 步： 如下所示，使用SetInterval 创建将在每10 秒内自动调用函数的函数。。

$(document).ready(function(){
    setInterval(function(){
        fetchData();
    },10000);  // this will call your fetchData function for every 10 Sec.

});

第 3 步： 为refresh按钮click event创建一个事件函数，并将该函数放入.ready()函数中。

$('#fetchContacts').click(function() {
     fetchData();
});

【讨论】：

@neelabhsingh - 尝试使用setInterval
感谢您的回复，您的方法有效，它正在刷新数据，但它正在将新数据附加到旧数据，所以我使用 $(".data-contacts-js tbody").empty ();在 ChrisH619 告诉您的代码中，谢谢你们俩。请更新您的代码，因为它也包含旧数据，因此请更改 $("#data-contacts-js > tbody").html("");到 $(".data-contacts-js tbody").empty();，谢谢
@neelabhsingh - 感谢您的更正:)。很高兴为您提供帮助。
嗨，你的刷新按钮也不起作用，所以我只是做了 $(document).ready(function(){ $("#data-contacts-js > tbody").html(" "); $('#fetchContacts').click(function() { fetchData(); }); });
请检查刷新按钮，它没有获取数据，所以我只添加 $(document).ready(function() 和 $(".data-contacts-js tbody").empty() ;，谢谢你的回复...

【解决方案3】：

您可以简单地使用 jQuery 数据表。这是一个功能齐全的 jQuery 插件，适用于具有大量数据集的表，支持在给定时间间隔内刷新等操作。见here

【讨论】：