如何在不重新加載整個頁面的情況下重新加載 javascript 函數並在 html 頁面上重新加載頁腳？

Question

我有一個加載 javascript 功能的 main.page.php 以獲取服務器啟動或關閉狀態。 我想每 10 秒重新加載一次此功能，以檢查服務器狀態並通過刷新頁腳而不是整個頁面來更新頁腳 div 中的狀態消息。

主頁.php

<head>

<?php require_once 'inc/meta.php'; ?>

<?php require_once 'inc/css.php'; ?>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

  <script type="text/javascript">

    'use strict';

    function queryPlex (query) {
          return $.ajax({
          type: 'POST',
          url: 'inc/plex-api.php',
          cache: false,
          data: {'postData': query},
          dataType: 'json'
        });
    }

    $(document).ready(function () {
          getServerStatus();   
    });

    function getServerStatus () {

         const serverStatusDiv = $('#server-status-msg'); 
         const getServerStatus = queryPlex('/');
         getServerStatus.done(function (data) {
                 if (data) {     
                 serverStatusDiv.html(' <i style="color:green; font-style:normal;"> &nbsp;ONLINE <span style="color:green;" class="fas fa-fw fa-check-circle" data-fa-transform="grow-4"></span></i>');
                } else {     
                 serverStatusDiv.html(' <i style="color:red; font-style:normal;"> &nbsp;OFFLINE <span style="color:red;" class="fas fa-fw fa-exclamation-circle" data-fa-transform="grow-4"></span></i>');
                }
            });

         getServerStatus.fail(function () {  
         serverStatusDiv.html(' <i style="color:red; font-style:normal;"> &nbsp;OFFLINE <span style="color:red;" class="fas fa-fw fa-exclamation-circle" data-fa-transform="grow-4"></span></i>');
                    });    
}
   </script>

</head>

<body id="body_iframe"  onload="getServerStatus ()">

<!-- ============ Fixed Nav ============ -->

     <?php require_once 'inc/nav_main.php'; ?>

<!-- ============ Begin page content ============= -->


    <div id="container_iframe" style="background-color:black;">
          <iframe id="iframe" name="frame" frameBorder="0" scrollbar="no" src="./?page=media"></iframe>
        </div>


<!-- ============ Sticky Footer ============ -->

    <?php require_once 'inc/footer.php'; ?>

<!-- ============== Bootstrap core JavaScript  ================= -->

<script src="js/jquery.min.js" type="text/javascript"></script>

<?php require_once 'inc/javascripts.php'; ?>

</body>
</html>

頁腳.php

<!-- ============ Footer ============ -->

<div id="footer_iframe" class="bg-black">
  <div class="text-right">

    <!-- ============ Check Server Status ============ -->

    <p class="text-right">StreamNet Server: <span id="server-status-msg">&nbsp;checking status ....</span></p>  


  </div>
</div>

我怎樣才能做到這一點？

謝謝。

更新

我更新了我的 main.page.php

向函數添加了setTimout一個添加的腳本來重新加載頁腳 div。

 <script type="text/javascript">

    'use strict';

    function queryPlex (query) {
          return $.ajax({
          type: 'POST',
          url: 'inc/plex-api.php',
          cache: false,
          data: {'postData': query},
          dataType: 'json'
        });
    }

    $(document).ready(function () {
          getServerStatus();   
    });

    function getServerStatus () {

         const serverStatusDiv = $('#server-status-msg'); 
         const getServerStatus = queryPlex('/');
         getServerStatus.done(function (data) {
                 if (data) {     
                 serverStatusDiv.html(' <i style="color:green; font-style:normal;"> &nbsp;ONLINE <span style="color:green;" class="fas fa-fw fa-check-circle" data-fa-transform="grow-4"></span></i>');
                } else {     
                 serverStatusDiv.html(' <i style="color:red; font-style:normal;"> &nbsp;OFFLINE <span style="color:red;" class="fas fa-fw fa-exclamation-circle" data-fa-transform="grow-4"></span></i>');
                }
            });

         getServerStatus.fail(function () {  
         serverStatusDiv.html(' <i style="color:red; font-style:normal;"> &nbsp;OFFLINE <span style="color:red;" class="fas fa-fw fa-exclamation-circle" data-fa-transform="grow-4"></span></i>');
                    }); 

      setTimeout(getServerStatus, 10000);

}
   </script>

<script>
$(document).ready(function(){
    setInterval(function(){
        $("#footer").load('inc/footer.php')
    }, 10000);
});
</script>

我還刪除了 php 代碼以在 main.page.php 的末尾加載 footer.php。

<body id="body_iframe"  onload="getServerStatus ()">

<!-- ============ Fixed Nav ============ -->

     <?php require_once 'inc/nav_main.php'; ?>

<!-- ============ Begin page content ============= -->


    <div id="container_iframe" style="background-color:black;">
          <iframe id="iframe" name="frame" frameBorder="0" scrollbar="no" src="./?page=media"></iframe>
        </div>


<!-- ============ Sticky Footer ============ -->
<div id="footer"></div>


<!-- ============== Bootstrap core JavaScript  ================= -->

<script src="js/jquery.min.js" type="text/javascript"></script>

<?php require_once 'inc/javascripts.php'; ?>

</body>

但現在我的頁腳不再加載了？

Answer 1

您可以使用 setInterval

setInterval(getServerStatus, 10000);

設置間隔

對於頁腳，您可以使用 jQuery 替換內容。

$('#server-status-msg').html('Server is Up');

如何在不重新加載整個頁面的情況下重新加載 javascript 函數並在 html 頁面上重新加載頁腳？

問題描述

1 個解決方案

解決方案1
0 2020-02-18 19:17:01

如何在不重新加載整個頁面的情況下重新加載 javascript 函數並在 html 頁面上重新加載頁腳？

問題描述

1 個解決方案

解決方案1 0 2020-02-18 19:17:01

解決方案1
0 2020-02-18 19:17:01