У меня есть main.page. php, который загружает функцию javascript, чтобы получить статус сервера вверх или вниз. Я хотел бы перезагружать эту функцию каждые 10 секунд, чтобы проверять состояние сервера и обновлять сообщение о состоянии в div нижнего колонтитула, обновляя нижний колонтитул, а не всю страницу.
main.page. 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;"> 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;"> 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;"> 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"> checking status ....</span></p>
</div>
</div>
Как мне этого добиться?
Спасибо.
ОБНОВЛЕНИЕ
я обновил свою главную страницу. 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;"> 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;"> 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;"> 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 загрузить нижний колонтитул. php в конце главной страницы. 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>
но теперь мой нижний колонтитул больше не загружается?