使用Ajax实时更改数据库

Question

I'm building a website that prints the content in it's Mysql database to the page for the user to see. 我正在构建一个网站，将其内容在其Mysql数据库中打印到用户要查看的页面。 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. 我正在使用PHP将数据库的内容回显到页面，它工作得很好，只是为了看到任何新的更改，页面必须重新加载。 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... 我猜这将涉及Ajax，但我对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!

I'm using the following PHP code to print the above data to the web page: 我正在使用以下PHP代码将上述数据打印到网页：

$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;

Thanks! 谢谢！

Answer 1

If you want to use the jQuery library, you can use this example I wrote. 如果你想使用jQuery库，你可以使用我写的这个例子。 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);
?>

So basically, it checks if the document is ready and everything is loaded. 所以基本上，它检查文档是否准备就绪并且所有内容都已加载。 After that is makes a new array called shownIds. 之后是一个名为shownIds的新数组。 This variable will keep the id (primary index from your sql table) to make sure it doesn't show the same data twice. 此变量将保留id（来自sql表的主索引）以确保它不会显示两次相同的数据。 SetInterval just makes it call that function every two seconds. SetInterval只是让它每两秒调用一次该函数。 $.get this function gets the page source of test2.php which has the json data. $ .get此函数获取具有json数据的test2.php的页面源。 It parses it with $.parseJSON and then loops through each. 它用$ .parseJSON解析它，然后循环遍历每个。 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. 为了确保没有两行显示两次，它会检查$ .inArray以查看id是否已经在shownIds数组中。 If it isnt, it appends the data (just id for now) onto the only div. 如果不是，它会将数据（现在只是id）附加到唯一的div上。 Then it pushes the id into the shownIds array so that it doesnt get shown again. 然后它将id推入shownIds数组，以便它不会再次显示。

test2.php makes an array. test2.php创建一个数组。 Sets the ids, and echos the data in the json format (not needed but keeps it organized) 设置id，并以json格式回显数据（不需要但保持组织）

Answer 2

使用jquery ajax http://api.jquery.com/jQuery.ajax/简单易用，每秒后调用ajax方法......这样每隔一秒后你就会得到新的数据。

使用Ajax实时更改数据库

问题描述

2 个解决方案

解决方案1
3 已采纳 2011-12-17 22:06:25

解决方案2
1 2011-12-17 22:00:14

使用Ajax实时更改数据库

问题描述

2 个解决方案

解决方案1 3 已采纳 2011-12-17 22:06:25

解决方案2 1 2011-12-17 22:00:14

解决方案1
3 已采纳 2011-12-17 22:06:25

解决方案2
1 2011-12-17 22:00:14