Question

这是我的代码：

<div style="overflow-x: hidden; overflow-y: visible; height:300px; width:300px;" id="textDiv">
<?php
$query = mysql_query("SELECT * FROM posts ORDER BY id");
while($queryVar = mysql_fetch_assoc($query))
{
    echo $queryVar['id'].". ".$queryVar['text']."<br>";
}
?>
</div>
<div id="postComment">
<textarea id="text" onKeyPress="if(window.event.keyCode==13) postComment()"     cols="30" rows="1" style="border: solid 1px #888;"></textarea>
</div>

<script type="text/javascript">

function postComment()
{
var textVar = document.getElementById('text').value;
$("#text").val("");
$.ajax
({
    type: "GET",
    url: "controllers/sendCommentController.php",
    data: 'text=' + textVar,
    success: function(msg)
    {
        $("#textDiv").hide().fadeIn('fast');
    }
})
}
</script>

正如您在textarea中按Enter键所看到的那样，sendCommentController.php执行（一个简单的mysql插入查询）。我希望我的textDiv重新加载其内容。 .load（）没有真正工作或者我搞砸了，它将另一个textDiv div加载到我现有的...请帮助:(另外，我应该如何使div的滚动条始终位于底部？它也不会真的与.load一起工作。:(

Answer 1

function postComment()
{
var textarea = $("#text");
var textVar = $.trim(textarea.val());
textarea.val("");
$.ajax({
    type: "POST",
    url: "controllers/sendCommentController.php",
    data: 'text=' + textVar,
    success: function(msg)
    {
        $("#textDiv").hide().html(msg).fadeIn('fast');
    }
})
}

可能将此更改为POST而不是GET。

Answer 2

您没有在回调中附加新内容。

success: function(msg)
{
    $("#textDiv").append(msg).hide().fadeIn('fast');
}

有关滚动问题，请参阅此SO answer。

使用jQuery重新加载div内容

2 个答案: