Fatal编程技术网
  • javascript/
  • Javascript 如何使jquery表每10秒刷新一次？

Javascript 如何使jquery表每10秒刷新一次？

javascript jquery ajax json

Javascript 如何使jquery表每10秒刷新一次？,javascript,jquery,ajax,json,Javascript,Jquery,Ajax,Json,我正在制作管理员门户，管理员可以在其中查看当前预订的总数，为此，我们必须每10秒自动刷新一次表，还有刷新按钮，更新表，我使用JQuery、Ajax、Json、Spring MVC，这里还有一个问题，当我点击按钮时，它会重复信息。因此，请帮助我使这两件事自动刷新Jquery表格数据库和按钮，它也刷新信息，而无需重复信息，提前感谢您的帮助和任何建议 注意：多亏了Prog和ChrisH619，这是一个工作代码 <!DOCTYPE html> <html> &l

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

注意：多亏了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>


主页服务-新页面-下一代服务提供商-管理员主页
函数fetchData（）{
$（“.data contacts js tbody”）.empty（）；
$.get（”http://www.service4homes.com:8080/HomeServiceProvider/booking/getAllBookingDetails，函数（数据）{
$。每个（数据、功能（i、联系人）{
$（“.data contacts js”）.append(
“”+contact.custId+“”+
“”+contact.custName+“”+
“”+contact.custMobile+“”+
“”+contact.custmail+“”+
“”+contact.custAddress+“”+
“”+联系人。日期+“”+
“”+联系人。时间+“”
);
});
});
}
$（文档）.ready（函数（）{
$（“#数据联系人js>tbody”）.html（“”）；
setInterval（函数（）{
fetchData（）；
}，10000）；//这将每隔5秒调用fetchData函数。
});
$（文档）.ready（函数（）{
$（“#数据联系人js>tbody”）.html（“”）；
$（'#fetchContacts'）。单击（函数（）{
fetchData（）；
});
});
木工服务
身份证件
客户名称
客户手机
客户电子邮件
住址
日期
时间
地位
刷新
$（函数（）{
});
更改jQuery：

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

在你的

 $.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秒运行一次，或者单击一次。但不会针对多个挂起的请求重击服务器

：）

更改jQuery：

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

在你的

 $.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秒运行一次，或者单击一次。但不会针对多个挂起的请求重击服务器

：）

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

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

尝试使用

第一步：

<!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>
您应该创建一个通用函数，该函数将从
数据库中获取所有数据，如下所示


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>"
                                );
                        });
                    });
}



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

});


第三步：
为
刷新
按钮
单击事件
创建一个事件函数，并将此函数放入
.ready（）
函数中


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



尝试以下代码：-使用

第一步：


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


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


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>"
                                );
                        });
                    });
}



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

});


第三步：
为
刷新
按钮
单击事件
创建一个事件函数，并将此函数放入
.ready（）
函数中


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



它看起来像是在使用datatables，如果是这样，它有一个内置的方法来刷新它链接到的AJAX数据：
$（“#table”）.dataTable（）。fnAjaxUpdate（）我根据Prog及其工作代码ChrisH619更新了代码。感谢大家的帮助。看起来您正在使用datatables，如果是这样，它内置了一个方法来刷新链接到的AJAX数据：
$（“#table”）.dataTable（）。fnAjaxUpdate（）我根据Pro更新了代码