Question

我试图在我的网站上创建一个评论系统，用户可在其中发表评论＆amp;看到它出现在页面上而没有重新加载页面，有点像你在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个主要问题：

您没有从insert.php通过ajax返回任何内容。
您无需替换整个comment_part，只需添加新评论即可。
你为什么要重新加载页面？我认为使用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（）。

使用ajax

2 个答案: