Javascript 停留在Ajax表单到mysql的提交上

我擅长php和html，但我的朋友们仍然在学习js。我一直在创建一个表单，该表单将提交表单数据以插入mysql，而无需加载页面（ajax）

以下是我的表格：

<form id="panel1" action="rep-submit.php" method="post">
                                 <div class="form-group">
                                    <input type="text" name="rep_author" id="rep_author" placeholder="Your Name" class="form-control">
                                 </div>
                                <div class="form-group">
                                    <input type="email" name="rep_email" id="rep_email" placeholder="Your Email" class="form-control">
                                 </div>
                                 <div class="form-group">
                                      <textarea class="form-control" id="rep_comment" name ="rep_comment"rows="3" placeholder="Your comment"></textarea>
                                </div>
                                    <input type="hidden" value="<?php echo $comment_id; ?>" id ="rep_to">
                                    <input type="hidden" value="<?php echo $postp_id; ?>" id ="rep_post_id">
                               <input id="repsub" type="button" class="btn btn-primary" value="Submit">
                               </form>

最后，下面是rep-submit.php

    <?php include_once("includes/connection.php");
if(isset($_POST['rep_submit']))
    {
        global $connection;
        connection();
        $author = $_POST['rep_author'];
        $email = $_POST['rep_email'];
        $comment = $_POST['rep_comment'];
        $rep_to = $_POST['rep_to'];
        $post_id = $_POST['rep_post_id'];
       $com_rep = "yes,".$rep_to;

        $query = "INSERT INTO comment(comment_post_id,comment_author,comment_email,comment_content,comment_reply) ";
        $query .= "VALUES('$post_id','$author','$email','$comment','$com_rep')";
        $result = mysqli_query($connection, $query);

        if(!$result)
            {
                echo "There is some issue posting your reply on that comment<br>";
                echo mysqli_error($connection);
                echo json_encode(array("statusCode"=>201)); 
        }   
            else
            {
                echo "reply sucessfully sent for approval";

        $query = "SELECT * FROM comment WHERE comment_id = '$rep_to'";
        $result = mysqli_query($connection, $query);
        $row = mysqli_fetch_assoc($result);
        $com_count = $row['comment_reply_count'];
        $new_count = $com_count + 1;
        $query = "UPDATE comment SET ";
        $query .= "comment_reply_count = '$new_count' ";
        $query .= "WHERE comment_id = '$rep_to'";
        $result = mysqli_query($connection, $query);
        echo json_encode(array("statusCode"=>200));
        }   


    }
?>

---

您的代码未按预期工作，因为您需要调用Javascript代码正在侦听的
单击事件的
preventDefault（）
方法

您必须更改代码的这一部分：

$("#repsub").on('click', function() {

为此：

$("#repsub").on('click', function(event) {
    event.preventDefault();

通过这种方式，您可以防止提交按钮的默认行为，即提交
#repsub
，即提交
#panel1
表单

此外，还必须向通过AJAX发送的数据对象添加
rep_submit:1
：

data: {
    rep_author: rep_author, 
    rep_email: rep_email,
    rep_comment: rep_comment,
    rep_to: rep_to,
    rep_post_id: rep_post_id,
    rep_submit: 1 // Add this
},

大多数PHP代码没有执行，因为AJAX请求中缺少
rep\u submit
元素：
isset（$\u POST['rep\u submit']）
返回
false

此外，HTML代码中还有一个重要错误：您的
#repsub
输入类型为
submit.
。为了正确显示表单提交按钮，您需要将点更改为
submit
，以删除该点

最后一个问题是，在PHP中，如果成功，您将在回显最终json编码数据之前回显一些文本。您必须删除行
echo“reply successfully sent for approval”。这样，您的JS代码将能够解析响应并显示“成功”警报


其他考虑
我认为如果您处理表单的
submit
事件，而不是提交输入的
click
事件，会更好。为此，您只需通过以下方式更改代码：

$("#panel1").on('submit', function(event) {
    event.preventDefault();


您不应该使用
document.write（）
，尤其是在调用它的代码是异步的情况下（它将覆盖所有页面内容）。使用或JQuery的和方法


您应该以一致的方式从PHP输出数据。如果要使用JSON，请始终返回正确的JSON数据，并且不要将
echo
用于其他目的。在这种情况下，为了保持简单，您可以在成功时输出以下数据：

{
    "success": true
}

如果出现错误，请输出以下内容：

{
    "success": false,
    "error_message": "Your error message"
}

通过这种方式，您将能够以简单、干净的方式处理服务器响应


达曼的评论是正确的：您需要防止SQL注入。你可以找到一些关于如何做的好信息


有用的链接


event.preventDefault（）
哪个特定部件会导致问题？出什么问题了？我怀疑javascript函数没有被调用，请尝试感谢您的帮助回复，所以表单正在显示，当我单击submit按钮时，它的css属性更改为js中定义的禁用，但没有执行rep-submit.php中编写的内容，我相信success:part在ajax js中不起作用。对于sql注入，这只是学习文件（localhost），很快就会添加转义真正的字符串。我添加了**#**repsub，但它不起作用：（我很好奇AJAX是否启动，PHP文件是否被调用
fire？是否
success
fire？是否在浏览器控制台中看到请求的PHP文件？是否存在任何相关错误？当我单击submit时，我看到表单字段已提交，但没有响应。该警报（url）很好。在成功部分，我添加了文档。写信测试它是否有效，但它不起作用谢谢你的回复，我已经更新了ky问题中的代码，正如你所说的，但它仍然与以前一样，我已经拍摄了一个屏幕录制，你可以在这里看到它。对不起，我现在在手机中。我看到了，谢谢你的视频！我发现了其他问题s我以前没有注意到并更新了我的答案，现在一切都应该正常了OK现在它正在数据库中插入数据：）但如果（dataResult.statusCode==200）没有执行，我尝试了其他方法（如果任何条件失败，js必须这样做），但它没有做任何事情。当我单击submit按钮时，数据被插入数据库，并且没有出现警告框，这是PHP中输出的数据有问题。检查我的最新答案：）谢谢你们这么多的工作，它将帮助我学习js，我想给你们投票，但每当我点击向上箭头，它就会回滚--，我想这是因为声誉：P
{
    "success": false,
    "error_message": "Your error message"
}