javascript - 按时间间隔刷新页脚 DIV

Question

我在刷新页脚 div 时遇到问题，其中 mysql 结果显示在页脚中

我目前有一个显示 100 个框表的页面，该表在页面加载时加载并按时间间隔刷新，我尝试对页脚实现相同类型的方法，但出现意外标记的错误 <

我目前用来刷新表格的代码是

        function updateTable() {
        //console.log('function called');
        $('td.coloured').css('background-color','#8F8F8F').toggleClass('coloured');
        $.get('php/mysql.php', function(response) {
            response.forEach(function(item, index) {
                console.log(item.beacon);
                //$('td.coloured').css('background-color','#8F8F8F').toggleClass('coloured');
        $(`td.${item.beacon}`).css('background-color', item.location).toggleClass('coloured');
            });
        });

    }
    var updateTableInterval = setInterval(updateTable, 5000);
});


<script>
function updateFooter() {
<div id="footer">

<div class="box"><h6 align="center">Total count<h6>
<?php           
$connect = mysqli_connect("localhost", "user", "password", "test");  
$query = "SELECT count(value1) FROM table WHERE date = CURDATE()";  
$result = mysqli_query($connect, $query); 
while($row = mysqli_fetch_array($result)) {  
echo "".$row['count(value1)'].""; 
}  
?></div>
<div class="box2"><h6 align="center">Total count<h6>
<?php           
$connect = mysqli_connect("localhost", "user", "password", "test");  
$query = "SELECT count(value2) FROM table WHERE date = CURDATE()";  
$result = mysqli_query($connect, $query); 
while($row = mysqli_fetch_array($result)) {  
echo "".$row['count(value2)'].""; 
}  
?></div>
<div class="box3"><h6 align="center">Total count<h6>
<?php           
$connect = mysqli_connect("localhost", "user", "password", "test");  
$query = "SELECT count(value3) FROM table WHERE date = CURDATE()";  
$result = mysqli_query($connect, $query); 
while($row = mysqli_fetch_array($result)) {  
echo "".$row['count(value3)'].""; 
}  
?></div>
<div class="box4"><h6 align="center">Total count<h6>
<?php           
$connect = mysqli_connect("localhost", "user", "password", "test");  
$query = "SELECT count(value4) FROM table WHERE date = CURDATE()";  
$result = mysqli_query($connect, $query); 
while($row = mysqli_fetch_array($result)) {  
echo "".$row['count(value4)'].""; 
}  
?></div>
</div>
            });
    }
    var updateFooterInterval = setInterval(updateFooter, 5000);
});
</script>

Answer 1

使用纯 JavaScript，您不能混合使用 HTML 和 JS(React 会这样做，但它是 RJX)。简而言之，为页脚准备一个单独的 PHP 文件，例如 footer.php 并在其中放入您想要更新的代码:

<?php           
$connect = mysqli_connect("localhost", "user", "password", "test");  
$query = "SELECT count(value) FROM table WHERE date = CURDATE()";  
$result = mysqli_query($connect, $query); 
while($row = mysqli_fetch_array($result)) {  
  echo "".$row['count(value)'].""; 
}  
?>

然后在您的前端，使用 AJAX，最好是 ( $.load) 来更新:

<div id="footer">
  <div class="box">
    <h6 align="center">Total count<h6>
    <div class="footer-contents"></div>
  </div>
</div>

有了上面的，使用:

$(".footer-contents").load("footer.php");
setInterval(function () {
  $(".footer-contents").load("footer.php");
}, 5000);

以上将以 5 秒的间隔更新页脚。

最好将 document 的 ready 函数包装起来，并添加 #footer 以获得额外的特异性:

$(function () {
  $("#footer .footer-contents").load("footer.php");
  setInterval(function () {
    $("#footer .footer-contents").load("footer.php");
  }, 5000);
});

---

更新:

此内容位于 footer.php 中:

<div id="footer">
  <div class="box">
    <h6 align="center">Total count<h6>
<?php
$connect = mysqli_connect("localhost", "user", "password", "test");  
$query = "SELECT count(value1) FROM table WHERE date = CURDATE()";  
$result = mysqli_query($connect, $query); 
while($row = mysqli_fetch_array($result)) {  
  echo "".$row['count(value1)'].""; 
}  
?>
  </div>
  <div class="box2">
    <h6 align="center">Total count<h6>
<?php
$connect = mysqli_connect("localhost", "user", "password", "test");  
$query = "SELECT count(value2) FROM table WHERE date = CURDATE()";  
$result = mysqli_query($connect, $query); 
while($row = mysqli_fetch_array($result)) {  
  echo "".$row['count(value2)'].""; 
}  
?>
  </div>
  <div class="box3">
    <h6 align="center">Total count<h6>
<?php
$connect = mysqli_connect("localhost", "user", "password", "test");  
$query = "SELECT count(value3) FROM table WHERE date = CURDATE()";  
$result = mysqli_query($connect, $query); 
while($row = mysqli_fetch_array($result)) {  
  echo "".$row['count(value3)'].""; 
}  
?>
  </div>
  <div class="box4">
    <h6 align="center">Total count<h6>
<?php
$connect = mysqli_connect("localhost", "user", "password", "test");  
$query = "SELECT count(value4) FROM table WHERE date = CURDATE()";  
$result = mysqli_query($connect, $query); 
while($row = mysqli_fetch_array($result)) {  
  echo "".$row['count(value4)'].""; 
}  
?>
  </div>
</div>

您不需要上述代码中的任何其他内容。