javascript - 使用 ajax 进行异步评论

Question

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

索引.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>

插入.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() 返回结构更好的响应，但这超出了这个问题的范围。