javascript - 使用 ajax 和 php 自动加载动态内容
问题描述
我有一个 PHP 聊天应用程序,它可以自动从数据库中获取消息并显示它,目前一切正常,但必须手动重新加载页面才能显示新消息。如何实现 JQuery ajax 来获取消息或静默刷新特定消息列表 div不刷新整个页面?这是我的代码(不是页面上的完整代码,而是我想在其上使用 ajax 的主要 PHP 部分)
我在网上阅读的一些答案指定 PHP 代码必须位于单独的文件中,但下面代码中的某些函数和变量取决于保存此代码的主文件,因此如果放在单独的文件中,它就毫无用处。
<?php
// Attempt select query execution
global $db;
$id = $_GET["id"];
$sql = "SELECT * FROM msg WHERE id='$id' ";
if ($result = $db->query($sql)) {
if ($result->rowCount() > 0) {
while ($row = $result->fetch()) {
echo '<div class="chat-messages-item ' . chattype($row['sender']) . '">';
echo '<div class="chat-avatar chat-avatar-lg circle"><img src="' . senderpic($row['sender'], 'thumbnail', '100', '100') . '" alt=""></div>';
echo '<div class="chat-messages-content">';
echo '<div class="chat-messages-bubble ' . $msg_visibility . '">';
echo '<p>' . $row['message'] . '</p>';
echo '</div>';
echo '<ul class="chat-messages-info">';
echo '<li>';
echo '<div class="chat-time chat-seen"><span>' . $row["time"] . '</span>';
echo '</li>';
echo '</ul>';
echo '</div>';
echo '</div>';
}
unset($result);
} else {
echo "<p class='lead'><em>No Chat</em></p>";
}
} else {
echo "ERROR: Could not able to execute $sql. " . $mysqli->error;
}
谢谢
[编辑]
我尝试过: 1. 将上面的代码移动到一个单独的 PHP 文件中,并使用 jquery 来获取具有以下 js 代码的页面,但没有出现任何错误,也没有显示错误。如果我在浏览器中打开页面,它会显示所有消息的列表
function update() {
$.get("aj/messages.php", function(data) {
$("#allmessages").html(data);
window.setTimeout(update, 10000);
});
}
这是页面结构 - Message.php(显示其他聊天信息的主消息页面,如联系人、消息列表、消息、发送消息输入等)
- aj/msg.php (一个 php 页面,它从数据库中获取所有消息并将其包装在 style/css/html 中,这也是上面的 php 代码,并期望位于 id="allmessages" 位于 Message 中的 div 中。 php)
解决方案
正如您所提到的,将 PHP 代码和 HTML/JavaScript 代码分开是一种很好的做法。是的,这可能意味着您必须编写更多的 PHP 代码,但是如果 PHP 脚本必须使用相同的代码片段,那么这就是 PHP可以使用的地方include
,include_once
以便您可以将特定函数存储在一个脚本中并将它们导入其他脚本。请参见:
https://www.php.net/manual/en/function.include.php
目前,没有足够的示例能够正确回答您的问题。我建议您创建一个功能更强大的 PHP 脚本,它可以接受新的聊天输入,或者另一个可以显示数据库中当前聊天记录的脚本。
在这个用例中,聊天的每个成员都必须将新数据发送到数据库,然后定期获取/刷新他们对脚本的视图。您可以随时将新数据发送到数据库,然后根据特定的刷新率,查找记录中的差异。所以你的 JavaScript 会有一些功能。就像是
- 开始聊天()
- 发信息()
- 获取消息()
- 结束聊天()
这些会将数据发送到 PHP 脚本,PHP 脚本可能会给出响应。这一切都可以通过 AJAX 来完成。AJAX 是与 JavaScript 一起使用 HTTP GET 或 POST。这基本上就是像 JavaScript 这样的客户端脚本语言如何与像 PHP 这样的服务器端脚本语言对话。PHP 在 HTTP 请求由 Web 服务器处理时进行处理,一旦数据发送到浏览器,PHP 就无法再与它交互,这就是它是预处理器的原因。JavaScript 只能在浏览器中运行,并在浏览器接收到来自服务器的所有数据后进行处理。
因此,如果您有一些 HTML,例如:
<div class="chat-window">
<div class="transcript">
</div>
<div class="user-input">
<input type="text" /> <button>Send</button>
</div>
</div>
当用户输入文本并单击按钮时,您可以使用 JavaScript 执行任务。其中一项任务可以是收集用户输入的文本并将其发送到 PHP 脚本以添加到数据库中。如果自上次脚本检查以来数据库中有任何新消息,则另一个任务可以是更新字段。
使用 jQuery Framework for JavaScript,它可能是这样的:
function sendMessage(user, txt){
$.post("chat_input.php", { u: user, msg: txt });
}
这会创建一个对 PHP 脚本的 HTTP POST 调用,其中包含信息负载,例如用户和一些文本。您需要根据特定事件从 HTML 中收集此信息。
$(".user-input > button").click(function(){
sendMessage("jsmith", $(this).parent().find("input").val());
});
这段 jQuery 绑定了一个匿名函数作为click
事件的回调。当用户单击按钮时,它会在函数中运行该代码。
PHP 代码可能类似于:
<?php
$user = $_POST['u'];
$txt = $_POST['msg'];
include_once 'db_conn.php';
$stmt = $mysqli->prepare("INSERT INTO 'chat' VALUES (?, ?)");
$stmt->bind_param("ss", $user, $txt);
$stmt->execute();
$stmt->close();
?>
如您所见,这是非常初级的,不会回答您的整体问题。您必须进行大量研究,我建议您找到示例 PHP/jQuery Chat 示例,您可以从中学习或开始学习一些 JavaScript/jQuery 教程。
看更多:
- https://api.jquery.com/jQuery.post/
- https://api.jquery.com/click/
- https://api.jquery.com/category/selectors/
更新
如果您的 PHP 代码设置为收集一些数据并将其“发送”回 AJAX 脚本,那么您将像任何其他 PHP 页面一样准备它,并以某种方式将数据输出到页面。
<?php
$results = new array();
/* Assuming connection to DB */
/* Assuming SQL Query and result set is now in $results */
header('Content-Type: application/json');
echo json_encode($results);
?>
当您导航到此页面时,您将看到以 JSON 格式收集的数据。就像是:
[
{
"sender": "jsmith",
"message": "Hello World!",
"time": "12/27/2019 10:28:01"
},
{
"sender": "ssmith",
"message": "shut up john",
"time": "12/27/2019 10:28:12"
}
]
当 AJAX 向该脚本发送请求时,它将取回数据,然后可以迭代数组中的每个项目,根据需要为其创建 HTML。您也可以使用 HTML 或 Text 或 XML,我尽可能使用 JSON。
在 jQuery 中,这个函数可能看起来像:
function getMessages(){
var lastMessage = $(".chat-messages-item:last .chat-time").text().trim();
$.get("chatmessages.php", function(data){
$.each(data, function(i, msg){
if(lastMessage < msg.time){
var newMsg = $("<div>", {
class: "chat-messages-item " + chattype(msg.sender),
}).insertAfter($(".chat-messages-item:last"));
var av = $("<div>", {
class: "chat-avatar chat-avatar-lg circle"
}).appendTo(newMsg);
$("<img>", {
src: senderpic(msg.sender, 100, 100),
class: "thumbnail"
}).appendTo(av);
$("<div>", {
class: "chat-messages-content"
}).html("<p>" + msg.message + "</p>").appendTo(newMsg);
}
});
});
}
setTimeout(getMessages, 10000);
这只是基于您的代码的示例。
推荐阅读
- pandas - 在熊猫中将列解析为日期时间的最快方法
- angular - 禁用按钮不适用于 angular4 验证
- python - 如何从列表中定位 python 小部件标签?
- php - TYPO3 isDir、getRealPath 在控制器上不起作用
- android - 无法从 Facebook 请求 user_age_range
- json - Google Assistant SDK 中的多个参数
- find - OSX 查找名称中带有 (1) 的文件
- azure - 数据湖分析 U-SQL 提取速度(本地与 Azure)
- animation - Javascript 为我的 onmouseover 函数添加时间间隔
- javascript - 如何访问 DOM 对象的 CSS 属性?