在MySql数据库中添加新记录时,使用Jquery自动更新Div

时间:2011-12-03 00:48:04

标签: php jquery ajax

我正在为我的朋友建立一个社交网站。我想知道如何在数据库中添加新记录时更新包含数据库的少量插入记录的Div。简而言之,你必须看到facebook的实时通知,当有人做某事时,它会逐渐消失。这一切都发生在没有整个实时通知div的刷新。只有新通知才会添加到div。

我想使用jquery和AJAX这样做,因为我对它们有很好的了解。和PHP作为服务器端语言。

先谢谢你。

P.S:我已经搜索了许多网站的解决方案,但无法在任何地方找到它。我甚至试过浏览Facebook的源代码,但也找不到它!我希望有人在这帮助我! * 交叉手指 *

3 个答案:

答案 0 :(得分:4)

您可以使用Ajax Push发送帖子更新的通知,也可以使用拉动驱动。如果您已经通过PHP了解jquery和Ajax,那么后者可能会更容易。

定期检查一个间隔的新记录(例如,使用setInterval),如果找到它们,将它们加载到DOM并淡入它们。间隔不一定非常小,浪费资源..也许只要每30秒就可以做到。

setInterval('checkForUpdates', 30000);
var lastTime = (new Date()).getTime();
function checkForUpdates() {
   $.get('/php-page-that-checks-for-updates.php?timestamp=' . lastTime
      , function (results) {
         if (results) { /* fade into dom */ }
      }
   );
   lastTime = (new Date()).getTime();
}

PHP页面:

$timestamp = $_REQUEST['timestamp'];
$results = query('SELECT post FROM posts WHERE postTime > "$timestamp"');
echo fetch($results);

正如其他人建议的那样,您还可以将帖子标记为“已读”并将其用作指示符而不是时间戳,这也将解决我的示例中的时区问题。我不想添加额外的列只是为了做到这一点,但如果你已经有一个因为其他原因,这是一个好主意。

编辑:这是一个非常古老的答案,但如果你仍然可以这样做,我会使用WebSockets而不是任何类型的ajax长轮询。我不认为PHP是一种很棒的语言(我建议将socket.io与Node.js一起使用),但这是可能的。

答案 1 :(得分:2)

基本上它是这样的:

在您的页面上创建一个javascript函数,该函数对php页面进行ajax调用(使用jquery或本机xhr或不是)。 php页面跟踪“新东西”并在调用时返回它。 js函数在接收数据时,向通知栏添加新标签(div或其他)。使用javascript的setTimeout函数每隔一段时间调用该函数。

如果其中某些步骤让您感到困惑,请提出更具体的问题。

答案 2 :(得分:1)

您可以使用jQuery的$.getJSON()方法来访问PHP页面。此PHP页面将获取所有未读通知(您可以在通知表中添加一个名为“read”的列,并将其设置为0表示未读,1表示未读)并将其作为JSON Feed返回。

解析JSON并使每个人成为页面上显示的div。然后将它全部包裹在setInterval()中并每隔毫秒运行一次(或半秒钟,或四分之一秒,这取决于你)。

此外,要将它们标记为已读,请在您从JSON通知Feed创建的这些div上设置点击事件。点击后,它将联系另一个PHP页面(您可以使用$.post$.get),例如,它会收到id通知,并更改read列到1。