实现 Facebook 类型的通知需要使用类似于 Ajax 的技术，通过异步请求获取新的通知，然后更新用户界面。本文将介绍如何使用 jQuery 和 PHP 实现此功能。
前端代码
首先，我们需要在前端代码中创建一个按钮或图标，以便用户可以点击它来查看其通知。以下是包含按钮的 HTML 代码：
------- ---------------------- -- --------- ------------- ----- ------------ ---------------------- ---------
接下来，我们需要使用 jQuery 来处理用户点击按钮时发生的事件，并向服务器发送异步请求以获取最新的通知。代码如下：
---------------------------- -
--------------------------------------- -
--------
---- ------------------------
----- -------
-------- ------------------ -
-- -------
-
---
---
---在这段代码中，我们使用 $.ajax() 函数向 get_notifications.php 发送 POST 请求，并在成功的情况下处理服务器返回的响应。
在 get_notifications.php 中，我们需要查询数据库并返回新的通知。以下是示例 PHP 代码：
----- -- ----- ---- - --- ------------------------------------------------ ----------- ------------ -- ------- ----- - --------------------- - ---- ------------- ----- ------- - -------- --- ------- - ---- ------------------------------- -- ------------------- -------------- - ---------------------------------- -- ---- ---- ---------------------------- --
在这段代码中，我们首先创建一个 PDO 对象来连接数据库。然后，我们使用 prepare() 函数准备 SQL 查询，并将当前用户的 ID 作为参数传递给查询。
最后，我们使用 json_encode() 函数将查询结果编码为 JSON 格式，并将其发送回客户端。
后端代码
在前面的示例中，我们使用 PHP 处理服务器端请求。以下是完整的 get_notifications.php 代码：
----- -- ----- ---- - --- ------------------------------------------------ ----------- ------------ -- ------- ----- - --------------------- - ---- ------------- ----- ------- - -------- --- ------- - ---- ------------------------------- -- ------------------- -------------- - ---------------------------------- -- ------ ----- - --------------------- ------------- --- ------- - - ----- ------- - -------- --- ------- - ---- ------------------------------- -- ------------------- -- ---- ---- ---------------------------- --
在这段代码中，我们首先创建一个 PDO 对象来连接数据库。然后，我们使用 prepare() 函数准备两个 SQL 查询：一个用于获取未读通知，另一个用于将它们标记为已读。我们在执行第一个查询时将当前用户的 ID 作为参数传递。
最后，我们使用 json_encode() 函数将查询结果编码为 JSON 格式，并将其发送回客户端。
结论
通过本文介绍的方法，我们可以实现类似于 Facebook 的通知系统。当用户点击“通知”按钮时，我们可以在不刷新页面的情况下异步地从服务器获取最新的通知，并在用户界面中显示它们。同时，我们还可以将这些通知标记为已读，以便用户知道哪些通知是新的。
虽然本文只提供了一个简单的示例，但这个技术可以应用于许多其他场景，例如实时聊天、在线游戏等等。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/29263