卡在 Ajax 表单到 mysql 提交

Question

我擅长 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>

下面是我的post.js 我拿了很多在线指南来制作这样的js代码：P，花了1天时间完成仍然无法工作。请帮忙

$(document).ready(function(){
$("#repsub").on('click', function(event) {
event.preventDefault();
                            $("#repsub").attr("disabled", "disabled");
                            var rep_author = $('#rep_author').val();        
                            var rep_email = $('#rep_email').val();      
                            var rep_comment = $('#rep_comment').val();
                            var rep_to = $('#rep_to').val();
                            var rep_post_id = $('#rep_post_id').val();
                            var url = $("#panel1").attr("action");
                            alert(url);
                            $.ajax({
                                url: url, 
                                type: "POST",
                                data: {
                                rep_author: rep_author, 
                                rep_email: rep_email,
                                rep_comment: rep_comment,
                                rep_to: rep_to,
                                rep_post_id: rep_post_id
            },
            cache: false,   
            success: function(dataResult){
                var dataResult = JSON.parse(dataResult);    
                document.write(rep_comment);    

                if(dataResult.statusCode==200){
                        console.log("success");
                        $("#repsub").removeAttr("disabled");
                        $('#panel1').find('input:text').val('');
                        alert("success");
                        }
                        else if(dataResult.statusCode==201){                     
                        alert("Error occured !");                   
                        }
                        }

                            });
                            });
                            });

最后是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));
        }   


    }
?>

Answer 1

您的代码未按预期工作，因为您需要调用 Javascript 代码正在侦听的 click 事件的 preventDefault() 方法。

您必须更改这部分代码：

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

到这里：

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

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

另外，您必须将rep_submit: 1 添加到您通过 AJAX 发送的数据对象中：

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

由于缺少 AJAX 请求中的 rep_submit 元素，您的大部分 PHP 代码未执行：isset($_POST['rep_submit']) 返回 false。

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

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

---

其他注意事项

我认为最好处理表单的submit 事件而不是提交输入的click 事件。为此，您应该以这种方式简单地更改您的代码：

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

---

你不应该使用document.write()，特别是如果调用它的代码是异步的（它会覆盖所有页面内容）。使用Node.insertBefore()、Node.appendChild() 或JQuery 的append() 和prepend() 方法。

---

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

{
    "success": true
}

如果出错，输出这个：

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

通过这种方式，您将能够以简单明了的方式处理服务器响应。

---

Dharman 的评论是正确的：您需要防止 SQL 注入。你可以在here找到一些很好的信息。

---

有用的链接

• event.preventDefault() - Documentation on MDN