使用 Ajax 实时更改数据库答案

【问题标题】：Real time database changes with Ajax使用 Ajax 实时更改数据库
【发布时间】：2012-01-22 19:17:51
【问题描述】：

我正在构建一个网站，将其 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;

谢谢！

【问题讨论】：

tizag.com/ajaxTutorial 展示如何创建 AJAX 对象
我正在尝试从数据库中获取内容，而他们只是在填写日期
原理完全一样，不是发回日期，而是发回你想显示的任何信息。
类似但有一些不同。我需要在用户不做任何事情的情况下更新网站。 tizag 教程让用户输入内容以使其响应。
你可以使用Javascript函数setInterval()，它会每隔x秒调用一个函数

标签： php javascript ajax database

【解决方案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 格式回显数据（不需要，但保持井井有条）

【讨论】：

天哪...感谢您的回答！给我一点时间来完成它。 :)

【解决方案2】：

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

【讨论】：