Php 每秒使用MySQL数据库中的内容更新HTML元素

我希望在我的网页上有一个基于MySQL数据库中数据的div。当数据库中的数据更改时，div中的内容也应该更改

示例：假设我在MySQL数据库中的表的第一行中有一个名为“server\u statistics”的字段，用于跟踪服务器的在线或离线状态。当服务器脱机时，MySQL字段从1变为0。当它联机时，它从0变为1

因此，我想使用Javascript在我的网页上显示服务器状态，并在不刷新页面的情况下进行更新

我想我可以这样做：

<script type="text/javascript">
    var int = self.setInterval("update()", 1000);
    function update() {
        var statusElement = document.getElementById("status");
        var status = "<?php 
            $con = mysql_connect("localhost", "root", "");
            mysql_select_db("database_name", $con);
            $row = mysql_fetch_array(mysql_query("SELECT * FROM server_statistics LIMIT 1"));
            mysql_close($con);
            echo $row[0]; ?>";
        if (status == 0) {
            statusElement.style.color = "red";
            statusElement.innerHTML = "offline";
        }
        else {
            statusElement.style.color = "green";
            statusElement.innerHTML = "online";
        }
    }
</script>

var int=self.setInterval（“update（）”，1000）；
函数更新（）{
var statusElement=document.getElementById（“状态”）；
var status=“”；
如果（状态==0）{
statusElement.style.color=“红色”；
statusElement.innerHTML=“脱机”；
}
否则{
statusElement.style.color=“绿色”；
statusElement.innerHTML=“在线”；
}
}

但这不起作用。页面需要刷新才能更新，我不知道为什么

我读过我可以使用JQuery的文章，但我对这种语言一无所知

我试过这个：

<script type="text/javascript">
    var int = self.setInterval("update()", 1000);
    function update() {
        $('#status').load('load.php');
    }
</script>

var int=self.setInterval（“update（）”，1000）；
函数更新（）{
$（'#status'）.load（'load.php'）；
}

然后在load.php中，我得到了以下信息：

<?php
    echo "test";
?>

但过了1秒什么也没发生。我可能做错了，因为正如我所说的，我对JQuery/AJAX的东西一无所知

那么，我如何在每个指定的时间间隔从MySQL数据库中检索字段，然后自动更新相应的HTML元素呢？最好只在数据库发生更改时更新HTML，但现在，我只希望每隔几秒钟或几分钟更改一次

---

提前感谢。

而不是

var int=self.setInterval（“update（）”，1000）尝试使用
self.setInterval（更新，1000）并将其放在更新函数之后。
您需要做的是利用AJAX。每次您的页面想要检查状态时，都需要向服务器发出请求。有两种方法可以做到这一点：自己手动刷新页面，或者使用AJAX调用

AJAX其实并不那么难，您首先要创建一个单独的PHP页面
check_status.PHP
，其中包含以下内容：

<?php 
    $con = mysql_connect("localhost", "root", "");
    mysql_select_db("database_name", $con);
    $row = mysql_fetch_array(mysql_query("SELECT * FROM server_statistics LIMIT 1"));
    mysql_close($con);
    echo $row[0]; ?>

真的是这样。每秒钟，它都会调用
update（）
方法，该方法进行AJAX调用，并将结果插入到HTML中。
刷新时它是否正确更新？定义了
self
的位置（此代码使用：
var int=self.setInterval（“update（）”，1000）；
）？将其更改为
window.setInterval
或只是
setInterval
，它应该可以工作。当您使用第一种方法时，它只是在页面加载时硬编码javascript中的状态，这就是为什么刷新时它可以工作的原因。你需要使用ajax来查询一个页面，该页面会回显状态。不，计时器不是问题所在。update（）方法每秒都被调用一次，但由于某种原因，该值没有改变。我想使用AJAX，但不知道为什么将php文件中的任何内容加载到HTML元素中都不起作用…仍然不起作用：函数每秒都会被调用，但“status”变量即使在数据库中更改后也不会更改。。。真奇怪。我必须刷新页面，然后它会改变。谢谢你的回复，但我根本无法让它工作：我想放数据的div没有更新。。。我有一个类似div的函数，更新函数每秒都会被调用。我的check_status.php与包含javascript函数的页面位于同一目录中。我试着只回显字符串而不是MySQL查询，但什么都没发生。。。我不知道为什么它不工作……我稍微更新了我的代码，使它稍微更健壮一些。看看这是否有帮助。如果没有，也许我们可以帮你调试更多，你在使用哪个浏览器？你在回显什么字符串？当你在浏览器中手动调用check_status.php时，它会为你显示什么？抱歉，伙计们，我觉得自己很傻哈哈。我对AJAX一无所知，也不知道你必须通过。。。我认为它不需要Javascript那样的功能。我现在已经开始工作了，非常感谢。
var statusIntervalId = window.setInterval(update, 1000);

function update() {
    $.ajax({
        url: 'check_status.php',
        dataType: 'text',
        success: function(data) {
            if (parseInt(data) == 0) {
                $("#status").css({ color: "red" }).text("offline");
            } else {
                $("#status").css({ color: "green" }).text("online");
            }
        }
    }
}