Javascript ajax——异步添加注释

我有两个php文件处理我为我的网站创建的评论系统。在index.php上，我有一个表单和一个echo语句，它从数据库中打印出用户输入。我有另一个名为insert.php的文件，它实际上接收用户输入，并在打印出来之前将其插入我的数据库

我的index.php基本上如下所示

<form id="comment_form" action="insertCSAir.php" method="GET">
    Comments:
    <input type="text" class="text_cmt" name="field1_name" id="field1_name"/>
    <input type="submit" name="submit" value="submit"/>
    <input type='hidden' name='parent_id' id='parent_id' value='0'/>
</form>

<!--connects to database and queries to print out on site-->
<?php
    $link = mysqli_connect('localhost', 'name', '', '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>';
    }
?>

---

它还过滤掉不好的单词，这就是为什么会有if语句检查的原因。

有控制台错误吗？另外，您是否尝试直接在浏览器的地址栏中加载insert.php（即使没有值）以检查它是否正在加载？insert.php

看起来像什么？顺便说一句，您应该在ajax调用和常规脚本中切换到POST以进行数据库插入。请使用POST insert.php代码。这些代码没有任何控制台错误。我使用get的原因是因为POST总是返回一个空数组，并且以前给我错误。GET是我能够从用户检索信息的唯一方法。此外，我还更新了insert.php代码，为什么脚本的重定向头只能由ajax请求调用？那么#myElement，它到底指的是什么？另外，我在index.php中的while循环中有一个echo，echo输出注释，这是否意味着我不在其中写入它，而是在success（）函数中写入它？@Oviya Arasu-它指的是要将注释文本放入其中的任何元素。您可以执行

$（'body'）.append（data.comment）只会将注释文本附加到正文（网站）的末尾
<?php
if(!empty($_GET["field1_name"])) {

//protects against SQL injection
    $field1_name = mysqli_real_escape_string($link, $_GET["field1_name"]);
    $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 parentComment (COMMENTS) VALUES ('$newComment')";
    $result = mysqli_query($link, $sql);
//attempt insert query execution
    if ($result)
    {
        http_response_code(200); //OK
        //you may want to send it in json-format. its up to you
        $json = [
            'commment' => $newComment
        ];

        print_r( json_encode($json) );
        exit();
    }


//header("Location:chess.php");   don't know why you would do that in an ajax-accessed file
//die();

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


?>

<script>
        // this is the id of the form
        $("#comment_form").submit(function(e) {

        var url = "insert.php"; // the script where you handle the form input.

        $.ajax({
            type: "GET", //Id recommend "post"
            url: url,
            dataType: json,
            data: $("#comment_form").serialize(), // serializes the form's elements.
            success: function(data)
            {
                alert(data); // show response from the php script.
                $('#myElement').append( data.comment );
            }
        });

        e.preventDefault(); // avoid to execute the actual submit of the form.
      });
   </script>

if(!empty($_GET["field1_name"])) {

    //protects against SQL injection
    $field1_name = mysqli_real_escape_string($link, $_GET["field1_name"]);
    $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 parentComment (COMMENTS) VALUES ('$newComment')";
     $result = mysqli_query($link, $sql);
     //attempt insert query execution

     header("Location:index.php");
     die();

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

<?php
if(!empty($_GET["field1_name"])) {

//protects against SQL injection
    $field1_name = mysqli_real_escape_string($link, $_GET["field1_name"]);
    $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 parentComment (COMMENTS) VALUES ('$newComment')";
    $result = mysqli_query($link, $sql);
//attempt insert query execution
    if ($result)
    {
        http_response_code(200); //OK
        //you may want to send it in json-format. its up to you
        $json = [
            'commment' => $newComment
        ];

        print_r( json_encode($json) );
        exit();
    }


//header("Location:chess.php");   don't know why you would do that in an ajax-accessed file
//die();

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


?>

<script>
        // this is the id of the form
        $("#comment_form").submit(function(e) {

        var url = "insert.php"; // the script where you handle the form input.

        $.ajax({
            type: "GET", //Id recommend "post"
            url: url,
            dataType: json,
            data: $("#comment_form").serialize(), // serializes the form's elements.
            success: function(data)
            {
                alert(data); // show response from the php script.
                $('#myElement').append( data.comment );
            }
        });

        e.preventDefault(); // avoid to execute the actual submit of the form.
      });
   </script>