使用Ajax实时数据库的变化 [英] Real time database changes with Ajax
问题描述
我建立，打印在它的内容的网站的MySQL数据库的页面为用户看见。该数据库的内容将被不断地加入到了，我想告诉那些无需重新加载在用户页面上的实时变化。我使用PHP来呼应数据库页面的内容，现在，它的伟大工程，它只是看到任何新的变化，该页面已被重新加载。所以我的问题是，如何让我的页面更新自己在实时？我猜这会涉及到阿贾克斯，但我相当新的JavaScript ...
I'm building a website that prints the content in it's Mysql database to the page for the user to see. The database's content is going to be constantly added to, and I want to show those changes in real time on the page without the user having to reload. I'm using PHP to echo the contents of the database to the page right now and it works great, it's just that to see any new changes, the page has to be reloaded. So my question is, how do I make the page update itself in real time? I'm guessing this is going to involve Ajax but I'm rather new to javascript...
难道你们不介意指着我正确的方向？
Would you guys mind pointing me in the right direction?
下面是我的数据库是这样的：
Here's what my database looks like:
id author body
----------------------------------------
1 jim sample content
2 bob more content
3 fred some more!
我用下面的PHP code打印上面的数据到网页：
I'm using the following PHP code to print the above data to the web page:
$query = mysql_query("SELECT * FROM log order by id desc") or die(mysql_error());
while($row = mysql_fetch_array($query)) :
echo $row['author'];
echo $row['body'];
endwhile;
谢谢！
推荐答案
如果你想使用jQuery库，你可以用这个例子我写的。 它的pretty的令人生畏在第一，但生病解释尽我所能。
If you want to use the jQuery library, you can use this example I wrote. Its pretty daunting at first, but ill explain the best I can.
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var shownIds = new Array();
setInterval(function(){
$.get("test2.php", function(data){
data = $.parseJSON(data);
for(i = 0; i < data.length; i++){
if($.inArray(data[i]["id"], shownIds) == -1){
$("#log").append("id: " + data[i]["id"] + "<br />");
shownIds.push(data[i]["id"]);
}
}
});
}, 2000);
});
</script>
</head>
<body>
<div id="log">
</div>
</body>
</html>
test2.php
test2.php
<?php
$result[0]["id"] = "id1";
$result[1]["id"] = "id2";
echo json_encode($result);
?>
因此，基本上，它会检查文件已准备就绪，一切都被加载。 之后，是使一个新的数组称为shownIds。这个变量将保持ID（从SQL表的主索引），以确保它不会显示两次相同的数据。 的setInterval只是使它调用该函数每两秒钟。 $不用彷徨此功能得到test2.php有JSON数据的页面的源代码。 它分析其与$ .parseJSON然后遍历每个。 为了确保没有两个行显示两次，用$ .inArray检查看的ID已经在shownIds阵列。 如果它不是，它附加数据（只是ID现在）上的唯一分区。 然后，它推动了ID到shownIds阵列，使得它不得到再次显示。
So basically, it checks if the document is ready and everything is loaded. After that is makes a new array called shownIds. This variable will keep the id (primary index from your sql table) to make sure it doesn't show the same data twice. SetInterval just makes it call that function every two seconds. $.get this function gets the page source of test2.php which has the json data. It parses it with $.parseJSON and then loops through each. To make sure that no two rows are shown twice, it checks with $.inArray to see if the id is already in the shownIds array. If it isnt, it appends the data (just id for now) onto the only div. Then it pushes the id into the shownIds array so that it doesnt get shown again.
test2.php使得阵列。设置ID和回声JSON格式的数据（不需要但仍保持其组织）
test2.php makes an array. Sets the ids, and echos the data in the json format (not needed but keeps it organized)
这篇关于使用Ajax实时数据库的变化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
