如何使用 AJAX 实时运行 SQL 选择查询？

Question

我目前正在为一个学校项目用 PHP 构建一个评论系统，但我偶然发现了一个问题。我希望用户能够发布无需刷新即可插入的评论。我得到了这个工作。我还希望帖子加载所有 cmets，包括用户刚刚发布的那个。

我不知道如何做后者，所以这就是我在这里寻求建议/提示/示例的原因。

这是我现在用来加载当前帖子的所有 cmets 的代码。它正在工作，但我想以某种方式将其替换为具有相同功能但“实时”的 AJAX 代码。

include('dbconnect.php');
$stmt = $db->prepare("
SELECT c.comments_id, c.time, c.comment, c.date, c.posts_id, c.users_id, users.users_id, users.name, users.surname, users.profilepicture 
FROM `comments` as c k
INNER JOIN users ON c.users_id = users.users_id 
WHERE c.posts_id = ".$row["posts_id"]);
$stmt->execute();
$amtResults = $stmt->rowCount();
$results = $stmt->fetchAll(PDO::FETCH_ASSOC);
foreach ($results as $row) {
    echo '<div class="row">
            <div class="column column-1">
                 <img style="padding-left:5px;padding-top:5px; height: 30px; width: 30px;" class ="commentuppic" src="/uploads/'.$row["profilepicture"].'" alt="Profile picture">
            </div>
            <div class="column column-9">
               <p id="replytext">   
                   <a href="profilefriend.php?user_id='.$row["users_id"].'">'.$row["name"].' '.$row["surname"].'</a>:<br>
                '.$row["comment"].'
                </p>
            </div>
            <div class="column column-1">
                <form method="post">
                    <button type="submit" style="width: auto;" name="delete_comment" ><span class="fa fa-trash-o"></span></button>
                    <input type="hidden" name="comments_id" value="'.$row["comments_id"].'" />
                </form>
            </div>
        </div>';
}

如果需要，这里是我用于将评论插入数据库的代码：

       $("form[name='submit_comment']").submit(function (e) {
            //do whatever you want to do when submitting comment
            var comment = $('#comment').val();
            var post_id = $('#post_id').val();
            $.ajax({
                url: 'insertmessage.php',
                //async: true,
                //cache: false,
                data: {comment:comment, post_id:post_id},
                type: 'POST',           
            });

        return false;
        });

和insertmessage.php：

if($_POST["comment"]){
    include('dbconnect.php');
    // set the PDO error mode to exception
    $db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

    // prepare sql and bind parameters
    $stmt = $db->prepare('INSERT INTO comments ( date, time, comment, posts_id, users_id ) VALUES ( :date, :time, :comment, :posts_id, :users_id )');
    $date = date("Y/m/d");
    $time = date("h:i:sa");
    $stmt->bindValue(':date', $date, PDO::PARAM_STR);
    $stmt->bindValue(':time', $time, PDO::PARAM_STR);
    $stmt->bindValue(':comment', $_POST["comment"], PDO::PARAM_STR);
    $stmt->bindValue(':posts_id', $_POST['post_id'], PDO::PARAM_INT);
    $stmt->bindValue(':users_id', $_SESSION['users_id'], PDO::PARAM_INT);
    $stmt->execute();
    $db= null;
    header('Location: profile.php');
}

感谢任何帮助！

编辑：我强烈推荐@David 他的解决方案，因为它运行良好且易于实施！

Answer 1

评论成功插入数据后，添加到页面即可。这将在$.ajax() 函数中的success 回调中完成：

$.ajax({
    url: 'insertmessage.php',
    data: {comment:comment, post_id:post_id},
    type: 'POST',
    success: function (response) {
        // here you would add it to the page
    }
});

（还有一个 error 回调来处理错误响应，您可能还想研究一下，以便在出现问题时通知用户。）

您已经拥有comment 值，因此除非您需要服务器提供其他信息，否则您可以忽略回调中的response。但是，如果有您需要从服务器获取信息，那么您就可以从那里获得它。

（但是请注意，当前您的服务器端并没有向响应写入任何内容。它返回一个重定向，AJAX 请求基本上会忽略该重定向。如果您想返回任何数据，您必须像在任何其他 PHP 页面中一样将其写入响应（尽管最好使用 json_encode() 进行 AJAX 响应）而不是重定向。）

如何在页面上显示评论完全取决于您。这取决于页面的 HTML 以及您要添加评论的位置。但是由于您使用的是 jQuery，它应该很容易。例如，如果您想将评论添加到已知元素，您可以像这样添加：

var existingComments = $('#someElement').text();
$('#someElement).text(existingComments + comment);

这可能太简单了，但希望你能明白。或者您可以将注释包装在一个新元素中并将其附加到某些内容：

$('#someElement').append('<div>' + comment + '</div>');

真的有无数种可能性。但要点是您将在 AJAX 调用的 success 回调中执行此操作。基本上，操作的顺序是：

1. 将评论发送到服务器
2. 插入数据库，返回成功
3. 将评论添加到页面

Answer 2

对于重载部分使用“成功”功能。 文档：http://api.jquery.com/jquery.ajax/

并使用 .load() 重新加载内容而不刷新页面。 文档：http://api.jquery.com/load/

您的代码将如下所示：

$("form[name='submit_comment']").submit(function (e) {
            //do whatever you want to do when submitting comment
            var comment = $('#comment').val();
            var post_id = $('#post_id').val();
            $.ajax({
                url: 'insertmessage.php',
                //async: true,
                //cache: false,
                data: {comment:comment, post_id:post_id},
                type: 'POST',
                success : function(code_html, statut){ 
                    $('#your_comment_container').load(document.URL +  ' #your_comment_container');
                }
            });

        return false;
        });