使用ajax和php自动加载动态内容

Question

我有一个 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)

Answer 1

正如您所提到的，将您的 PHP 代码和 HTML/JavaScript 代码分开是一个很好的做法。 是的，这可能意味着您必须编写更多的 PHP 代码，但是如果 PHP 脚本必须使用相同的代码片段，则可以在此处使用 PHP include和include_once以便您可以将特定函数存储在一个脚本中并将它们导入到另一个脚本中脚本。 请参见：

https://www.php.net/manual/en/function.include.php

目前，没有足够的示例来正确回答您的问题。 我建议您创建一个功能更强大的 PHP 脚本，它可以接受新的聊天输入，或者创建另一个可以显示数据库中当前聊天记录的脚本。

在这个用例中，聊天的每个成员都必须向数据库发送新数据，然后定期获取/刷新他们对转录的视图。 您可以随时将新数据发送到数据库，然后根据特定的刷新率，查找抄本中的差异。 所以你的 JavaScript 会有一些功能。 就像是

• 开始聊天（）
• 发信息（）
• 获取消息（）
• 结束聊天（）

这些将向 PHP 脚本发送数据，而 PHP 脚本可能会给出响应。 这一切都可以通过 AJAX 来完成。 AJAX 是将 HTTP GET 或 POST 与 JavaScript 一起使用。 这基本上就是像 JavaScript 这样的客户端脚本语言如何与像 PHP 这样的服务器端脚本语言进行对话。 PHP 在 Web 服务器处理 HTTP 请求时进行处理，一旦数据发送到浏览器，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 脚本以添加到数据库中。 如果自上次脚本检查以来数据库中有任何新消息，则另一个任务可以是更新该字段。

使用 JavaScript 的 jQuery 框架，它可能是这样的：

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);

这只是基于您的代码的示例。