Question

所以我想在列表中构建聊天消息。我想在用户在输入字段中输入消息后添加新列表，然后单击“提交”按钮。

这是我的HTML：

<div class="panel-collapse">
    <div class="panel-body" style="overflow-y: scroll; height: 250px;">
        <ul class="chat" id="list"> 
           <li class="left clearfix">
                <span class="chat-img pull-left">
                    <img src="http://placehold.it/50/55C1E7/fff&text=U" alt="User Avatar" class="img-circle" />
                </span>
                <div class="chat-body clearfix">
                     <div class="header">
                         <strong class="primary-font">USER NAME</strong> <small class="pull-right text-muted">
                         <span class="glyphicon glyphicon-time"></span>12 mins ago</small>
                      </div>
                      <p> PUT HERE SOME OF TEXT OF CHAT </p>
                </div>
           </li>
           <li> ALL ATTRIBUTES IN PREVIOUS LI AND NEW MESSAGE WILL BE HERE </li>
        </ul>
    </div>

    <div class="panel-footer">
        <div class="input-group">
            <input id="chat-input" type="text" class="form-control input-sm" placeholder="Type your message here..." />
            <span class="input-group-btn">
                <button class="btn btn-warning btn-sm" id="btn-chat" type="submit"> Send</button>
            </span>
         </div>
    </div>

</div>

因此，每次用户在<input>字段中发送一些消息，然后点击按钮提交，jquery将添加新的<Li>，消息将放入<p> </p>。

这是我的JQuery：

$(document).ready(function() {
    $('#btn-chat').click(function(e) {
        e.preventDefault();
         var new_chat = $('#chat-input').val();
        $('#list').append('<p>'+new_chat+'</p>');
    });
});

如果我做错了，请更正我的代码。对此，我真的非常感激。谢谢。

Answer 1

将'<p>'+new_chat+'</p>'替换为'<li><p>'+new_chat+'</p></li>'

$(document).ready(function() {
  $('#btn-chat').click(function(e) {
    e.preventDefault();
     var new_chat = $('#chat-input').val();
    $('#list').append('<li><p>'+new_chat+'<p/></li>');
  });
});

结果：https://jsfiddle.net/7nz4cdwu/

Answer 2

当您将聊天消息添加到页面时，只要刷新页面，所有这些聊天消息都将消失。此外，聊天接收者无法接收消息。所有邮件只会出现在一个（临时）页面上，只能由发件人看到。

要解决此问题，您必须将聊天消息存储在某处并将其显示给相应的用户。这需要使用基于服务器的工具，例如PHP或ASP.NET。 PHP是迄今为止最常见的，当您在本地计算机上安装XAMPP或WAMP / MAMP / LAMP（Windows / Mac / Linux）时，您可以免费访问它（或者几乎任何廉价的在线托管帐户，几乎所有哪个使用LAMP）。 前面提到的工具，例如XAMPP，在您的本地计算机上创建了一个dev LAMP托管环境。

您有两种接收/存储/重新显示聊天消息的选项：FORMs或AJAX。建议使用AJAX，因为它不刷新页面，而且非常简单。 <form>构造是将数据发送到服务器的旧方法，AJAX就是我们现在这样做的方式。

当用户点击SEND时，使用jQuery / js通过用户的消息阅读<input>或<textarea>字段。然后，使用AJAX代码块将数据发送到服务器（到接收数据并将其插入数据库的PHP文件中）。

Here are some simple examples如何使用AJAX - 这很容易。确保复制示例并在系统上重现它们。这个季度你最好花15分钟。

您的代码看起来像这样（不完整/未经测试/ FYI）：

假设：用户登录index.php，并重定向到聊天系统的chats.php。

<强> chats.php

<?php
    session_start(); //Must be first instruction on page
    if ( !isset($_SESSION['userID'] ) header('Location: ' . 'index.php'); //2nd instruction on page
    $msgs = get_chat_messages($_SESSION['user_id']); //Note that user has logged in somehow
?>

<div class="panel-collapse">
    <div class="panel-body" style="overflow-y: scroll; height: 250px;">
        <ul class="chat" id="list"> 

<?php
    $out = '';
    while ($row = mysql_fetch_array($msgs)) {
        $out = '
           <li class="left clearfix">
                <span class="chat-img pull-left">
                    <img src="http://placehold.it/50/55C1E7/fff&text=U" alt="User Avatar" class="img-circle" />
                </span>
                <div class="chat-body clearfix">
                     <div class="header">
                         <strong class="primary-font">USER NAME</strong> <small class="pull-right text-muted">
                         <span class="glyphicon glyphicon-time"></span>12 mins ago</small>
                      </div>
                      <p>' .$row['msg_db_field_name']. '</p>
                </div>
           </li>
           <li> ALL ATTRIBUTES IN PREVIOUS LI AND NEW MESSAGE WILL BE HERE </li>
        ';
    }
    echo $out;
?>
        </ul>
    </div>

    <div class="panel-footer">
        <div class="input-group">
            <input id="chat-input" type="text" class="form-control input-sm" placeholder="Type your message here..." />
            <span class="input-group-btn">
                <button class="btn btn-warning btn-sm" id="btn-chat" type="submit"> Send</button>
            </span>
         </div>
    </div>

</div>

<script>
    var msg;
    $(function(){
        msg = $('#chat-input').val();
        $.ajax({
            type: 'post',
             url: 'my_ajax_processor.php',
            data: 'msg=' + msg,
            success: function(d){
                //if (d.length) alert(d); //uncomment for troubleshooting
                $('#list').append('\
                   <li class="left clearfix">\
                        <span class="chat-img pull-left">\
                            <img src="http://placehold.it/50/55C1E7/fff&text=U" alt="User Avatar" class="img-circle" />\
                        </span>\
                        <div class="chat-body clearfix">\
                             <div class="header">\
                                 <strong class="primary-font">USER NAME</strong> <small class="pull-right text-muted">\
                                 <span class="glyphicon glyphicon-time"></span>12 mins ago</small>\
                              </div>\
                              <p>' +msg+ '</p>\
                        </div>\
                   </li>\           
                ');
            }//END success fn
        });//END ajax code block
    });//END document.ready
</script>

<强> my_ajax_processor.php

<?php
    $msg = $_POST['msg'];
    //now, store message into database. Of course, you need more than just the message. You also need the senderID and the recipID, plus maybe date, time etc.

以上是您聊天系统的全貌图。 codecourse.com上有一些很棒的视频教程。他们过去是免费的，他们现在收费约10美元/月。购买一个月访问并通过注册/登录tuts（他们有程序和OOP课程 - 程序更容易，如果你打算在这个行业工作，OOP更有用）。值得每一分钱。 请记得在再收取一个月的费用之前取消帐户。这是在您的PayPal账户中完成的 - 资料 - 我的资金 - 预先批准的付款 - 更新

JQuery：在<div> <ul>中添加新的<li>

2 个答案: