Javascript 异步注释——关于使用ajax的php_Javascript_Php_Jquery_Ajax

Javascript 异步注释——关于使用ajax的php

javascript php jquery ajax

Javascript 异步注释——关于使用ajax的php,javascript,php,jquery,ajax,Javascript,Php,Jquery,Ajax,我已经包括了我正在使用的代码。我试图让评论在我的网站上异步显示，该网站运行的是带有ajax的php。目前，我有一个数据库，它接收insert.php处理的用户输入。我可以将用户输入输入到我的数据库中并将其打印出来，但是如果不重新加载，它不会在index.php站点上打印注释。目标是让它自动打印出用户输入，而无需重新加载站点。现在发生的是，一旦我按下submit按钮，它会将我带到一个白色页面，一旦我再次打开index.php页面，就会显示评论。有些地方出了问题或链接不正确，不完全确定是什么 ind

我已经包括了我正在使用的代码。我试图让评论在我的网站上异步显示，该网站运行的是带有ajax的php。目前，我有一个数据库，它接收insert.php处理的用户输入。我可以将用户输入输入到我的数据库中并将其打印出来，但是如果不重新加载，它不会在index.php站点上打印注释。目标是让它自动打印出用户输入，而无需重新加载站点。现在发生的是，一旦我按下submit按钮，它会将我带到一个白色页面，一旦我再次打开index.php页面，就会显示评论。有些地方出了问题或链接不正确，不完全确定是什么

index.php

<html>
<head>

    <link href="csair.css" rel="stylesheet" type="text/css" media="all" />
    <script   src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

    <script>
        $(function() {
            $('#submitButton').click(function() {
                $.ajax({
                    type: "GET",
                    url: "insert.php",
                    data: {name: $('#userInput').val()},
                    , beforeSend: function(){
                }
                , complete: function(){
                }
                , success: function(html){
                    $("comment_part").html(html);
                }
            });
          });
       });
    </script>

</head>
<body>

<HR SIZE="6">

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

<!--connects to database and queries to print out on site-->
<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>

</body>
</html>

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:index.php");
    die();

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


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

1您没有阻止表单的默认操作，即转到insert.php。在$'submitButton'中需要event.PreventDefault。单击函数事件{…}。2修复1后，$.ajax会出现问题，因为insert.php有$userInput=$\u GET[field1\u name]；，但是您的$.ajax正在发送名称->数据：{name:$'userInput'.val}。因此，对于我的第二个错误，应该是名称：$'field1_name'.val吗？对于event.PreventDefault，这需要做些什么，还是我可以直接调用它？对于第二个错误，应该是数据：{field1_name:$'userInput'.val}，或者数据：{field1_name:$'input[name=field1\u name]'.val}。问题是name！=field1\u name，或者特别是$\u GET[name]！=$\u GET[field1\u name]。是一种防止触发默认事件的jquery方法，即防止表单进入insert.php。您只需要在$'submitButton'中调用它。clickfunctionevent{…}，但请注意，您需要在functionevent中添加事件。您还可以将其简化为e，即$'submitButton'。单击Functione{e.preventDefault；$.ajax{…}；}