如何在查看/单击菜单泡泡disappear.Anybody帮助后使用Ajax php在我的管理菜单中添加类似Facebook的通知泡(当新用户注册时)?
发布于 2016-01-10 08:13:41
当一个用户注册时,我猜你会把他/她添加到你的数据库中?如果是这样的话,我将在您的users
数据库中添加一个名为"notificationViewed“的字段,当您将该用户放入数据库中时,默认情况下该字段将是false
。
当连接或刷新管理菜单页面时,为页面服务的php应该检查数据库中是否有字段notificationViewed == false
,并将返回的用户数量COUNT
。在表示buble的html标记中,添加属性data-newUsers="<?= COUNT_OF_NEW_USERS ?>"
。
在客户端.
假设默认情况下,用CSS隐藏id="bubble"
:
#bubble {
display:none;
}
使用JavaScript,您可以轻松地访问data-*
属性:
var newUsers = document.getElementById('bubble').dataset.newUsers; // holds the number
或者使用jQuery:
var newUsers = $('#bubble').data('newUsers'); // same thing
此时,您可以检查newUsers > 0
是否。如果是这样的话,用数字填充气泡(如果你愿意的话),并制作一个很好的fadeIn
动画。jQuery中的示例:
if (newUsers > 0) {
$('bubble').text(newUsers).fadeIn();
}
现在,我们希望能够检测气泡何时被点击,以隐藏气泡和丢弃新的用户注册。同样,使用jQuery:
$('#bubble').click(function() {
$.post('discardNotifications.php', {usersNotified: newUsers}, function(data) {
if (data === "ok") { // php script returns this string if all went right
$('#bubble').fadeOut(function() {
$('#bubble').remove(); // remove the element from the DOM, to prevent further clicks of the element
}); // nice fadeOut animation of the bubble
}
}
});
只有当POST
请求成功时才会调用该函数。POST
请求指向discardNotifications.php
,它必须位于与管理菜单html文件相同的目录中(如果不是,只需更改相对路径)。调用的第二个参数是litteral对象,该对象包含通知的新用户数,发送到后端。
回到后端,在discardNotifications.php
.
您必须检查是否有一个名为“POST
”的usersNotified参数,然后查询users
数据库,最多更新"usersNotified“给出的数字。这考虑到可能有新用户订阅,因为您刷新了您的管理页面,并且您需要这些新用户的通知。如果不选择"usersNotified“的最大值,可能会忽略它们。示例(但未完成):
if (isset($_POST['usersNotified']))
{
$number = $_POST['usersNotified'];
// update the "notificationViewed" field to TRUE for at most $number different users
echo "ok"; // everything went right
} else {
echo "bad";
}
显然,您可以进行一些更改,并且您必须实现一些数据库处理。告诉我它是否有效!
Ps:在我的代码片段中可能有一些小错误,我没有测试所有的东西。
https://stackoverflow.com/questions/34702939
复制相似问题