Question

我擅长php和html，但是我仍在学习js。而且我一直坚持要创建一个表单，该表单将提交要插入到mysql中的表单数据，而无需加载page（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

您的代码无法正常工作，因为您需要调用Java代码正在侦听的preventDefault()事件的click方法。

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

$("#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
},

由于缺少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

卡在Ajax表单上以提交mysql

1 个答案:

其他注意事项