1

チャット機能を作成します。ここで私が何かを書くと、それはチャットdivに表示されます。しかし、私の問題は、もう一度書くと、最初のメッセージが2番目のメッセージに置き換わるということです。チャットdivにすべてのメッセージを表示したい。チャットのように

test.php

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Dhuronto</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
 $('#message').keydown(function (e){
    if(e.keyCode == 13 ){
if($(this).val()!=0)
    {
    e.preventDefault();//use this to prevent default behavior
    calculate();
    }
   }
   });
});

function calculate()
{
$.post(
"test_1.php",
$('#message').serialize(),
function(response)
{
$("#chat").html(response);
});
$('#message').val("");
}



</script>
</head>
    <body>
    <div id="chat" style=" width: 300px; height: 500px; border: 1px solid black; overflow: auto">

        </div>
        <textarea id="message" name="chat_message"></textarea>
    </body>
</html>

test_1.php

<?php

$message=$_POST['chat_message'];

echo "$message";

?>
4

3 に答える 3

2

append代わりに使用してください。htmlすべてのコンテンツを置き換えます。

$.post("test_1.php", $('#message').serialize(), function(response) {
    $("#chat").append($message.val() + '<br/>')
              .scrollTop($('#chat')[0].scrollHeight);
});

各メッセージの後に改行を追加できます。これにより、新しい行になります。新しいメッセージを入力した後、下にスクロールするために
使用します。scrollTop

デモ

于 2012-12-20T04:11:55.177 に答える
1

html内容を置き換えますappend。変化する：

$("#chat").html(response);

に：

$("#chat").append(response);
于 2012-12-20T04:11:40.157 に答える
0

代わりに

$("#chat").html(response);

あなたが使用することができます

$("#chat").append(response);

jquery html は html 全体を置き換え、jquery append は他の html タグまたは html 値を追加します

于 2012-12-20T04:13:00.877 に答える