Question

我想在我的网页上有一个div，它基于MySQL数据库中的数据。当数据库中的数据发生变化时，div中的内容也会发生变化。

示例：假设我的MySQL数据库中名为“server_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>

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

我读过我可以使用JQuery，但我完全不了解这种语言。

我试过了：

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

然后在load.php中我有这个：

<?php
    echo "test";
?>

但是1秒后没有任何事情发生。我可能做错了，因为正如我所说的，我对这个JQuery / AJAX的东西一无所知。

那么如何在每个指定的时间间隔内从MySQL数据库中检索字段，然后相应地自动更新HTML元素？理想的做法是仅在数据库发生更改时更新HTML，但就目前而言，我只希望每隔几秒或几分钟更改一次......

提前致谢。

Answer 1

您需要做的是使用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]; ?>

然后，在HTML页面中，最简单的方法是使用jQuery：

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

真的是这样的。每一秒，它都会调用update()方法进行AJAX调用并将结果插回到HTML中。

Answer 2

而不是var int = self.setInterval("update()", 1000);尝试使用self.setInterval(update, 1000);并将其放在更新功能之后。

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

2 个答案: