Question

我正在制作管理员门户网站，管理员可以看到当前预订的总数，为此我们必须每10秒自动刷新一次表格，还会有刷新按钮，这也刷新了表格，我使用的是JQuery ，Ajax，Json，Spring MVC，我试图创建多个Jquery表，每10秒刷新一次，但是只有一个表是刷新的，其他表不是。，预先感谢您的帮助和任何建议，

enter image description here

<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-contacts1-js tbody").empty();
                $.get("http://localhost:8080/HotelServiceProvider/getAllHotelBookingDetails", function(data) {
                    $.each(data, function(i, contact) {
                        $(".data-contacts1-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-contacts1-js tbody").empty(); 
                setInterval(function(){
                    fetchData();
                },10000);  // this will call your fetchData function for every 5 Sec.
            });

             $(document).ready(function(){
                  $(".data-contacts1-js tbody").empty();
                $('#fetchContacts1').click(function() {
                     fetchData();
                });
            });

        </script>
        <script type="text/javascript">         
            function fetchData(){
                $(".data-contacts2-js tbody").empty();
                $.get("http://localhost:8080/PGServiceProvider/getAllPgBookingDetails", function(data) {
                    $.each(data, function(i, contact) {
                        $(".data-contacts2-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-contacts2-js tbody").empty(); 
                setInterval(function(){
                    fetchData();
                },10000);  // this will call your fetchData function for every 5 Sec.
            });

             $(document).ready(function(){
                  $(".data-contacts2-js tbody").empty();
                $('#fetchContacts2').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-contacts1-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="fetchContacts1" class="btn btn-default" type="submit">Refresh</button>                          
                            </div>
                        </div>
                        <!-- /block -->
                    </div>

                    <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-contacts2-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="fetchContacts2" 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

您定义了fetchData两次。因为你在回调函数中调用函数，所以在两个不同的script标记中定义这些函数并不重要。

fetchData都在全局范围内定义，第二个覆盖第一个。这就是为什么.data-contacts2-js只是更新。

此示例显示了查找函数时的不同行为。

<!-- script block 1 -->
<script>
  setTimeout(test,100);//will call test #1 
  setTimeout(function() {
    test();//will call test #2
  },100);

  //test #1
  function test() {
     console.log(1);
  }
</script>

<!-- script block 2 -->
<script>
  setTimeout(test,100); //will call test #2
  setTimeout(function() {
    test(); //will call test #2
  },100);

  //test #2
  function test() {
    console.log(2);
  }
</script>

首先评估脚本块1 ，因为setTimeout(test,100);引用了test #1函数。

然后评估第二个脚本块，在执行之前test #2已知，因此第二个脚本块中的setTimeout(test,100);引用test #2。

如果setTimeout(function() {test();},100); 100ms之后执行此cbackback test()此回调中的test #2将针对两个脚本块调用test #2，则test #1为影子 {{1}}

如何在单个HTML页面中创建多个刷新自己的jquery表？

1 个答案: