Question

我正在尝试使用PHP和ajax创建一个简单的聊天。

到目前为止，我将所有聊天内容都显示在列表中，其中显示了来自该消息的人员，消息的小预览以及发送的时间。但是，我被困在将消息附加到聊天框的位置。当我点击预览1时，它应显示相应消息的聊天记录。

我有什么：

    $.ajax({
        type: "POST",
        url: "PHP/CHAT/chat.php",
        data: {user_id : user_id},   
        success: function(data){
            $.each(data.messages_array, function(i, data) {
                console.log(data);
                $("#messagesToUser").append('<li style="margin-bottom:15px;" class="active bounceInDown"><a href="#" id="'+data.msg_id+'" class="openChat"><span class="circle"><span class="userFirstLetter">'+data.userFirstName.substring(0,1)+'</span></span></div><div class="friend-name"><strong class="userFirstName">'+data.userFirstName+'</strong></div><div class="last-message text-muted" class="user_message">'+data.message+'</div><small class="time text-muted" class="messageDate">'+data.date_created+'</small><small class="chat-alert label label-danger" class="messageCount"></small></a></li> ');


            });
            $(document).on("click", ".openChat", function (e) {
                var chatID = $(this).attr('id');
                console.log(chatID);
                $("#chats").html('<div id="'+data.msg_id+'" class="chat-message"><ul class="chat" id="correctChatWindows" data-id=""><li class="left clearfix"><span class="chat-img pull-left"><span class="circle"><span class="userFirstLetter" id="fromUserFirstLetter">'+data.userFirstName.substring(0,1)+'</span></span></span><div class="chat-body clearfix"><div class="header"><strong class="primary-font" id="fromUserName">'+data.userFirstName+'</strong><small class="pull-right text-muted"><span id="timeSent">'+data.date_created+'</span> <i class="fa fa-clock-o"></i></small></div><p id="message">'+data.message+'</p></div></li></ul><div class="chat-box bg-white"><div class="input-group"><input class="form-control border no-shadow no-rounded" placeholder="Type your message here"><span class="input-group-btn"><button class="btn btn-success no-rounded" type="button">Send</button></span></div><!-- /input-group -->    </div>  </div>');

            });
            $(".se-pre-con").fadeOut("slow");

        },
        error: function(data){
            //this user has not added his information
            $('#content').text('Update unsuccessful!');
        }

    });

Console.log正确记录已单击的消息的msg_id，但我无法弄清楚如何附加相应的数据。

由于

Answer 1

在您的聊天框中，您将有一个正确显示文字的地方。因此，对于发生的每条消息，您将拥有一个具有唯一ID的div。所以你可以这样做：

<body>
    <div id="chat"> 
        <div id="msg1"></div>
        <div id="msg2"></div>
        <div id="msg3"></div>
        <div id="msg4"></div>
        <div id="msg5"></div>
    </div>
<script>
var your_divs = [ "msg1", "msg2", "msg3", "msg4", "msg5" ];
var msg_obj_with_ids = { msg1: 'some msg', msg2: 'some msg', msg3: 'some msg', msg4: 'some msg', msg5: 'some msg' };

jQuery.each( msg_obj_with_ids, function( your_divs, msg_obj_with_ids.val ) {
  $( "#" + your_divs ).text( "Message: " + msg_obj_with_ids.val + "." );


});

</script>

</body>

在上面的示例中，您需要尝试使用动态方式将消息填充到聊天中。

查看我在数组中的消息。我将它传递给html视图。我不知道你正在寻找什么技术的解决方案。但这就是你能做的。在php中，您可以使用循环通过计算数组来查找msgs的数量，然后多次运行循环并简单地打印所有消息。

根据点击时的ID将正确的JSON数据附加到div

1 个答案: