javascript - 卡在 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
},

您的大部分 PHP 代码未执行，因为 AJAX 请求中的 rep_submit 元素缺失:isset($_POST['rep_submit']) 返回 假。

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

最后一个问题是，在 PHP 中，如果成功，您将在回显最终 json 编码数据之前回显一些文本。您必须删除行echo“回复已成功发送以供批准”;。这样，您的 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 注入(inject)。您可以找到一些有关如何操作的好信息 here .

<小时/>

有用的链接

• event.preventDefault() - Documentation on MDN