Question

我正在制作管理员门户网站，管理员可以看到当前预订的总数，为此我们必须每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>

Answer 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秒运行一次或单击一次。但不会因为多个未决请求而对服务器进行锤击。

：）

Answer 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();
});

Answer 3

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

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

3 个答案: