javascript 使用 MySQL 数据库中的内容每秒更新 HTML 元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9406950/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Updating HTML Element Every Second With Content From MySQL Database
提问by user1226792
I'd like to have a div on my web page that is based off of the data in my MySQL database. When the data in the database changes, the content in the div should change as well.
我想在我的网页上有一个基于 MySQL 数据库中数据的 div。当数据库中的数据发生变化时，div中的内容也应该发生变化。
Example: Let's say I have a field in the first row of a table called "server_statistics" in my MySQL database which keeps track of a server being online or offline. When the server goes offline, the MySQL field changes from 1 to 0. When it goes online, it goes from 0 to 1.
示例：假设我的 MySQL 数据库中名为“server_statistics”的表的第一行中有一个字段，用于跟踪服务器在线或离线。服务器下线时，MySQL字段从1变为0，上线时，从0变为1。
So I want to use Javascript to display the server status on my webpage and update it without refreshing the page.
所以我想使用Javascript在我的网页上显示服务器状态并在不刷新页面的情况下更新它。
I thought I'd be able to do it like this:
我以为我可以这样做：
<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>
But this doesn't work. The page needs to be refreshed for it to update and I don't know why...
但这不起作用。该页面需要刷新才能更新，我不知道为什么...
I've read I can use JQuery but I have no knowledge of this language at all.
我读过我可以使用 JQuery，但我根本不了解这种语言。
I tried this:
我试过这个：
<script type="text/javascript">
var int = self.setInterval("update()", 1000);
function update() {
$('#status').load('load.php');
}
</script>
and then in load.php I had this:
然后在 load.php 我有这个：
<?php
echo "test";
?>
But nothing happened after 1 second passed. I'm probably doing it wrong because as I said, I don't know anything about this JQuery/AJAX stuff.
但是1秒过去后什么也没有发生。我可能做错了，因为正如我所说，我对 JQuery/AJAX 的东西一无所知。
So how can I accomplish retrieving a field from a MySQL database at every specified interval and then automatically update an HTML element accordingly? It would be ideal to only update the HTML when a change occurred in the database but for now, I just want it to change every few seconds or minutes...
那么我怎样才能在每个指定的时间间隔内从 MySQL 数据库中检索一个字段，然后相应地自动更新一个 HTML 元素呢？最好只在数据库发生更改时更新 HTML，但现在，我只希望它每隔几秒或几分钟更改一次...
Thanks in advance.
提前致谢。
回答by creanium
What you need to do is utilize AJAX. Your page will need to make a request to the server each time it wants to check the status. There are two ways to do it: manually refresh the page yourself, or use an AJAX call.
您需要做的是利用 AJAX。每次要检查状态时，您的页面都需要向服务器发出请求。有两种方法可以做到：自己手动刷新页面，或使用 AJAX 调用。
AJAX really isn't all that difficult, you start by creating a separate PHP page check_status.phpwith the following in it:
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]; ?>
Then, in your HTML page, the easiest way to do this would be to use jQuery:
然后，在您的 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");
}
}
}
}
That's it really. Every second, it will call the update()method which makes an AJAX call and inserts the result back into your HTML.
真的是这样。每一秒，它都会调用update()进行 AJAX调用的方法并将结果插入回您的 HTML。
回答by moesef
instead of var int = self.setInterval("update()", 1000);try using self.setInterval(update, 1000);and place it after the update function.
而不是var int = self.setInterval("update()", 1000);尝试使用self.setInterval(update, 1000);并将其放置在更新功能之后。
