javascript - 网站上的异步评论

Question

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

index.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>

插入.php

$userInput= $_GET["field1_name"];
if(!empty($userInput)) {
$field1_name = mysqli_real_escape_string($link, $userInput);
$field1_name_array = explode(" ",$field1_name);

foreach($field1_name_array as $element){
    $query = "SELECT replaceWord FROM changeWord WHERE badWord = '" . $element . "' ";
    $query_link = mysqli_query($link,$query);
    if(mysqli_num_rows($query_link)>0){
        $row = mysqli_fetch_assoc($query_link);
        $goodWord = $row['replaceWord'];
        $element= $goodWord;
    }
    $newComment = $newComment." ".$element;
}

//Escape user inputs for security
$sql = "INSERT INTO csAirComment (COMMENTS) VALUES ('$newComment')";
$result = mysqli_query($link, $sql);
//attempt insert query execution

mysqli_close($link);

//here you need to build your new comment html and return it
return "<div class='comment'>...the new comment html...</div>";
} 
else{
    die('comment is not set or not containing valid value');
}

insert.php 接收用户输入，然后将其插入数据库(首先过滤并检查不良单词)。只是不知道我哪里出了问题，被困了一段时间。任何帮助将不胜感激。

Answer 1

html() 在你的函数中用你的评论 html 替换当前的 html，这就是为什么你只看到新评论。将方法更改为 append()。

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