使用Ajax实时更改数据库

Question

我正在构建一个网站，将其内容在其Mysql数据库中打印到用户要查看的页面。 数据库的内容将不断添加，我希望在页面上实时显示这些更改，而无需用户重新加载。 我正在使用PHP将数据库的内容回显到页面，它工作得很好，只是为了看到任何新的更改，页面必须重新加载。 所以我的问题是，如何让页面实时更新？ 我猜这将涉及Ajax，但我对javascript很新...

你们介意我指向正确的方向吗？

这是我的数据库的样子：

id      author           body
----------------------------------------
1        jim              sample content
2         bob              more content
3         fred            some more!

我正在使用以下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;

谢谢！

Answer 1

如果你想使用jQuery库，你可以使用我写的这个例子。 起初它非常令人生畏，但生病解释尽我所能。

<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

<?php
$result[0]["id"] = "id1";
$result[1]["id"] = "id2";

echo json_encode($result);
?>

所以基本上，它检查文档是否准备就绪并且所有内容都已加载。 之后是一个名为shownIds的新数组。 此变量将保留id（来自sql表的主索引）以确保它不会显示两次相同的数据。 SetInterval只是让它每两秒调用一次该函数。 $ .get此函数获取具有json数据的test2.php的页面源。 它用$ .parseJSON解析它，然后循环遍历每个。 为了确保没有两行显示两次，它会检查$ .inArray以查看id是否已经在shownIds数组中。 如果不是，它会将数据（现在只是id）附加到唯一的div上。 然后它将id推入shownIds数组，以便它不会再次显示。

test2.php创建一个数组。 设置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