使用Ajax进行异步注释

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){
                    $("#comment_part").html(html);
                    window.location.reload();

                }
            });
        });
    });

</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

$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

    //header("Location:csair.php");
    die();

    mysqli_close($link);
}
else{
    die('comment is not set or not containing valid value');
}

insert.php接收用户输入，然后将其插入数据库（通过首先过滤并检查不良词）。 只是不确定我要去哪里错，在上面停留了一段时间。 任何帮助，将不胜感激。

Answer 1

您的代码中存在3个主要问题：

1. 您没有通过ajax从insert.php返回任何内容。
2. 您无需替换整个comment_part ，只需向其添加新注释。
3. 为什么要重新加载页面？ 我认为使用Ajax的全部目的是拥有动态的内容。

在你的ajax中：

 $.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);
            }
        });

在insert.php您需要返回新的html注释：

$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');
}

请注意，您目前没有任何错误处理，因此当您返回die('comment is not set....') ，将显示它以及一个新注释。 您可以使用json_encode()返回更好的结构化响应，但这不在此问题的范围内。

Answer 2

您正在使用jQuery.html（），它将元素中的所有内容替换为“ html”内容。 尝试改用jQuery.append（）。