Question

我正在尝试在我的网站上创建一个评论系统，用户可在其中发表评论＆amp;看到它出现在页面上而没有重新加载页面，有点像你在Facebook上发表评论并看到它立即出现。我遇到了麻烦但是因为我的实现显示了用户输入的注释，但随后删除了页面上已有的注释（如任何评论部分，我希望用户发表评论并简单地添加到以前的评论）。此外，当用户注释时，页面会重新加载，并在文本框中显示注释，而不是在应该显示注释的文本框下方。我附上了代码。 Index.php运行ajax脚本来执行异步注释，并使用该表单获取insert.php中处理的用户输入。它还会打印出存储在数据库中的注释。

的index.php

AND IGNORE MY PREVIOUS STYLE

insert.php

<script>
$(function() {
    $('#submitButton').click(function(event) {
        event.preventDefault();

     $.ajax({
        type: "GET",
        url: "insert.php",
        data : { field1_name : $('#userInput').val() },
        beforeSend: function(){
        }
        , complete: function(){
        }
        , success: function(html){
            //this will add the new comment to the `comment_part` div
            $("#comment_part").append(html);
        }
    });

    });
});

</script>

<form id="comment_form" action="insert.php" method="GET">
Comments:
<input type="text" class="text_cmt" name="field1_name" id="userInput"/>
<input type="submit" name="submit" value="submit" id = "submitButton"/>
<input type='hidden' name='parent_id' id='parent_id' value='0'/>
</form>

<div id='comment_part'>
<?php
$link = mysqli_connect('localhost', 'x', '', 'comment_schema');
$query="SELECT COMMENTS FROM csAirComment";
$results = mysqli_query($link,$query);

while ($row = mysqli_fetch_assoc($results)) {
    echo '<div class="comment" >';
    $output= $row["COMMENTS"];
    //protects against cross site scripting
    echo htmlspecialchars($output ,ENT_QUOTES,'UTF-8');
    echo '</div>';
}
?>
</div>

insert.php接受用户输入，然后将其插入数据库（首先过滤并检查坏词）。只是不确定我哪里出错了，一直坚持下去。任何帮助将不胜感激。

Answer 1

你的函数中的

html（）用你的评论html替换当前的html，这就是为什么你只看到新的评论。将您的方法更改为追加（）。

$("#comment_part").append(html);

Answer 2

更改此行

$("#comment_part").html(html);

到这个

$("#comment_part").html('<div class="comment" >' + $('#userInput').val() + '</div>' + $("#comment_part").html()).promise().done(function(){$('#userInput').val('')});

网站上的异步评论

2 个答案: