Question

我正在做一个简单的php聊天应用程序，它通过ajax将消息输入发送到服务器并将其保存在文本文件中。现在，它检索文本文件中的所有数据，并通过ajax以数组形式将其发送到客户端。现在我要做的是填充一个名为“chat-box”的div，其中数组的内容为html但没有任何反应，除了“：undefined”之外，我没有在firebug中出现任何错误。

这是代码：

<script type="text/javascript">
            // setInterval(function(){alert("Hello");}, 5000);
            $(document).ready(function() {
                function getchat(messages)
                {
                    var chat = $(".chat-box").html();
                    for (var i=0; i < messages.length; i++)
                    {
                        var msg = messages[i].split(':');
                        var name = msg[0];
                        var post = msg[1];
                        $(".chat-box").html(chat + "<div class='bubble'>" + name + " : " + post + "</div>");

                    }
                }

                $("#btnPost").click(function() {
                    var msg = $("#chat-input").val();
                    if (msg.length == 0)
                    {
                        alert ("Enter a message first!");
                        return;
                    }
                    var name = $("#name-input").val();
                    var chat = $(".chat-box").html();
                    //$(".chat-box").html(chat + "<br /><div class='bubble'>" + msg + "</div>");

                    var data = {
                        Name : name,
                        Message : msg
                    };
                    $.ajax({
                        type: "POST",
                        url: "chat.php",
                        data: {
                            data: JSON.stringify(data)
                        },
                        dataType: "json",
                        success: function(chat) {
                            getchat(chat)
                        }
                    });
                });
            });
        </script>

Answer 1

请尝试更新聊天框：

var index = messages[i].indexOf(':');
var name = messages[i].substring(0, index);
var content = messages[i].substring(index + 1);
var $newMessage = $('<div>')
        .addClass('bubble')
        .text(name + " : " + content);
$(".chat-box").append($newMessage);

如果这不起作用，请使用console.log(messages)检查服务器返回的消息是否正确。

Answer 2

你说div叫做聊天盒。也许就是这样：

$(".chat-box")

也许您打算将其写为$("#chat-box")

设置div html以显示数组的内容

2 个答案: