Question

大家好我正在尝试与Jquery，php，ajax和mysql建立聊天我几天以后面临的问题是，当我得到最后一条消息的值时，它继续附加到div我想要的是仅将最后一条消息附加一次，如果这里有新消息，则再次追加我的ajax电话

var chat = "";
     $.ajax({
            url: "php/gt_user.php",
            type: "get",
            success: function (result) {
                var gtUser = $.parseJSON(result);
                $.each(gtUser, function (idx, obj) {
                    var usrApp = "<span><i class='fa fa-user-circle-o' aria-hidden='true'></i>";
                    usrApp += "<p class='usr-name'>" + obj.Tables_in_chat + "</p></span>";
                    $('.userarea').append(usrApp);
                }); // here i get all the username who sent a message and print them on a div
                $('.userarea span').on('click', function () {
                    $('.msgarea').html("");
                    var usrName = $(this).text();
                    $('#usrname').text(usrName);
                    setInterval(function () {
                        $.ajax({
                            url: "php/admin_msg.php",
                            type: "post",
                            data: {
                                name: usrName
                            },
                            success: function (result) {
                                var lastmsg = result;

                                function appedn() {
                                    var usrMsg = "<div class='usr-msg'><i class='fa fa-user-circle-o' aria-hidden='true'></i>";
                                    usrMsg += "<span><p>" + lastmsg + "</p></span></div>";
                                    $('.msgarea').append(usrMsg);
                                }

                                if (chat !== result) {
                                    appedn();

                                } else {
                                    chat = result;
                                }

                            }

                        });
                    }, 2000);


                });
            }
        });

来自php/admin_msg.php的respanse正在工作，我得到了最后一条消息，问题是这个脚本不断向消息区添加相同的消息，我想要的是只添加消息一次，如果有的话一个新的

Answer 1

你需要以某种方式识别已经附加到你的html的最后一条消息，最好的是从服务器发送的一些id。因此，您的消息div应该包含一些data-id属性，然后当您要求下一封消息获取$('.msgarea')元素的最后一个子元素时，请将其读取data-id并与当前消息进行比较。

我建议移动到一些视图库或框架，反应，角度，vue或其他什么。当你想用纯jQuery管理这些功能时，它会变得复杂。

Answer 2

我终于能够在经过一天的斗争后解决问题，所以会在这里发布这个问题以防万一它会帮助其他人面对同样的问题

我必须从数据库获取所有用户名表的部分我将其移动到我的HTML并使用几行php来回显结果（每个用户名都有自己的表）

  // show all the user name that sent a message
    $result = $con->query("show tables from chat"); 
    while($row = mysqli_fetch_assoc($result)){
      echo "<span><i class='fa fa-user-circle-o' aria-hidden='true'></i><p class='usr-name'>".$row['Tables_in_chat']."</p></span>"; 
    }

然后在我的jquery脚本上移动了在click事件之外每隔2秒检查最后一条消息的函数，这样我的Jquery脚本现在看起来更干净了

  /* get the user name and added it to the header of the message box  */
     $('.userarea span').on('click', function () {
            $('.msgarea').html("");
            var usrName = $(this).text();
            $('#usrname').text(usrName);

        });
        var chatdata = "";
   /* check for new message and append the message area if there is a new one */
        setInterval(function () {
            var usrName = $('#usrname').text();
            $.ajax({
                url: "php/admin_msg.php",
                type: "post",
                data: {
                    name: usrName
                },
                success: function (result) {
                    function appedn() {
                        var usrMsg = "<div class='usr-msg'><i class='fa fa-user-circle-o' aria-hidden='true'></i>";
                        usrMsg += "<span><p>" + result + "</p></span></div>";
                        $('.msgarea').append(usrMsg);
                    }

                    if (chatdata !== result) {
                        appedn();
                        chatdata = result;
                    }
                }
            });
        }, 2000);

附加最后一条消息

2 个答案: