我如何使用 AJAX JQUERY 从数据库发送和获取消息答案

【问题标题】：how can i send and get messages from database using AJAX JQUERY我如何使用 AJAX JQUERY 从数据库发送和获取消息
【发布时间】：2022-01-05 11:16:57
【问题描述】：

我正在使用 PHP 和 AJAX JQUERY 构建网站。在这个网站里面，有短信系统，比如whatsapp，telegram ...等。

我想在用户使用 jQuery AJAX 发送消息后从数据库中获取所有消息。到目前为止，我已经能够成功地将文本发送到数据库，但是当我尝试获取消息时失败了。

第一次加载页面时我有以下代码：

<div class="messaging-frame">
    <div class="Title-in-message">
        <h4 class="title-message"><?php echo $index['Title'] ?></h4>
    </div>
    <div class="messaging-box" id="messages">
        <?php
        // THE MESSAGE FROM MESSAGE TABLE
        foreach ($messages as $key => $value) {

            if ($_SESSION['EmployeeNum'] === $value['Sender']) { ?>
                <div class="row">
                    <div class="col" style="margin-bottom:15px">
                        <div class='sent'>
                            <p id='send-bubble'> <?php
                                                    echo $value['Message'] ?> </p>
                        </div>
                    </div>
                </div>
            <?php
            } else { ?>
                <div class="row">
                    <div class="col" style="margin-bottom:15px">
                        <div class='recived' id="recieved-bubble">
                            <p id='recived-bubble'><?php echo $value['Message'] ?></p>
                        </div>
                    </div>
                </div><?php
                    }
                }
                        ?>
    </div>\

当用户在消息框中发送新消息时，将执行 AJAX jQuery 中的这段代码：

$(document).ready(function() {
    $('#sending_text').click(function() {
        var report = $('#report_num').val()
        var reportInt = parseInt(report);
        var text = $('#text_sent').val();
        var encodeText = encodeURIComponent(text);

        $.ajax({
            url: "<?php echo base_url() . 'DisplayTicket/sendNewText' ?> ",
            type: "POST",
            data: {
                text: text,
                reportNum: reportInt
            },
            success: function() {
                
                $('#messages').load("<?php echo base_url() . 'DisplayTicket/getNewMessages' ?>", {reportNum: reportInt}, function() {
                    var texts = " <?php foreach ($messages as $k => $val) { if ($_SESSION['EmployeeNum'] === $value['Sender']) { ?>";

                    texts += " <div class='row'> <div class='col' style='margin-bottom:15px'> <div class='sent'>";
                    texts += "<?php echo $val['Message'] ?>";
                    texts += "</div> </div> </div>";
                    texts += "<?php } else {  ?>";
                    texts += " <div class='row'> <div class='col' style='margin-bottom:15px'> <div class='recived' id='recieved-bubble'>"
                    texts += "<?php echo $val['Message'] ?>";
                    texts += "</div> </div> </div>"
                    texts += "<?php }
                                    } ?>";
                    texts += "</div>";
                    $('#messages').html(texts);

                })
            },
        });
            
    });
})

请记住，$('#messages').html(texts); 实际上是被执行了，但是没有添加最新的消息

【问题讨论】：

如果你想使用 AJAX，那么你需要实现一个轮询模式，通过这种模式你每隔一段时间就向服务器发出请求，以检查是否有新消息并显示它们。研究setInterval() 和setTimeout()。但是需要注意的是，AJAX 轮询对于生产环境来说并不是一个好的解决方案。对于聊天系统，您应该考虑使用 Websockets 之类的东西来减少服务器负载并减少发送/接收消息之间的延迟

标签： php jquery ajax

【解决方案1】：

我看到您正在使用 .load() 方法来填充 #messages 。通常，此方法的第一个参数是您要插入的响应，这只是成功后的回调，您使用的是 php 变量 $messages 而不是使用来自请求的响应。

我已经看到了两种方法： 1 - 从load() 中删除回调，并确保响应以您想要的方式很好地写在 html 中

2 - 去掉 load() 函数，并在第一个 ajax 的成功内调用另一个 ajax 来完成。

第二种方法只是让你明白什么是错的。所以最好的方法是相应地修复load()方法

【讨论】：