非同期でウェブサイトにコメントする

Question

私は自分のウェブサイトにコメントシステムを作成しようとしています。&は、ページを再読み込みせずにページに表示されます。直ちに。私はこの問題に苦しんでいますが、私の実装ではユーザーが入力したコメントが表示されますが、既にページにあった以前のコメントは消去されます（コメントセクションとしてコメントして前のコメント）。また、コメントが表示されるはずのテキストボックスの下ではなく、ユーザーがコメントしたときにページがリロードされ、テキストボックスにコメントが表示されます。私はコードを添付しました。 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> 

$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は、ユーザ入力を取り込み、その後、データベースに挿入する（第1のフィルタリングによって、および悪い言葉をチェック）insert.php 。私がどこに間違っているのか分かりませんが、しばらくそれに固執しています。どんな助けもありがとう。

Answer 1

html（）現在のhtmlをコメントhtmlに置き換えると、なぜ新しいコメントが表示されるのですか？方法をのappend（）に変更してください。

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

Answer 2

変更するには、 `HTMLを使用しているので、それは以前のすべてのコメントを削除します。この

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