Question

我不知道问题出在哪里，但发现如果我将此行data: form_data更改为data: form_data;它不会返回Ajax，但PHP函数可以正常工作。

默认ajax，行：data : form_data - ＆gt;打破页面和PHP功能将无法正常工作

添加“;”在该行之后data : form_data; - ＆gt;什么都不显示，但PHP函数工作，并在数据库中插入“回复”

应该看看调用PHP函数并显示警告对话框，如下所示：

回复表格：

<!-- REPLY MODAL -->
<div class="modal fade reply_comment_<?php echo $comment['id'];?>" id="reply_comment_<?php echo $comment['id'];?>" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <b><center><div class="modal-header">Reply Comment</div></center></b>
            <form id="replyForm_<?php echo $comment['id'];?>" class="horiziontal-form" action="../Pages/fun_post.php?action=replyCommentForm" method="post">
                <center><textarea name="reply" style="width:80%; height:200px; margin-top:20px; margin-bottom:20px; resize:vertical;" placeholder="Write your comment!"></textarea></center>
                <input type="hidden" name="addedby" class="form-control col-md-7 col-xs-12" value="<?php echo $myRow['id']; ?>" />
                <input type="hidden" name="comment_id" class="form-control col-md-7 col-xs-12" value="<?php echo $comment['id']; ?>" />
                <input type="hidden" name="post_id" class="form-control col-md-7 col-xs-12" value="<?php echo $comment['post_id']; ?>" />
                <input type="submit" style="float:right; margin-right:90px;" class="btn btn-primary" name="submit" value="Reply" />
            </form>
        </div>
    </div>
</div>
<!-- END OF REPLY MODAL -->

脚本：

<script>
$(function(){
    $("#reply_comment_<?php echo $comment['id'];?>").submit(function(event){
        event.preventDefault(); //prevent default action
        var post_url = $(this).attr("action"); //get form action url
        var request_method = $(this).attr("method"); //get form GET/POST method
        var form_data = $(this).serialize(); //Encode form elements for submission

        $.ajax({
            url : post_url,
            type: request_method,
            data : form_data
        }).done(function(response){ //
            $('#reply_comment_<?php echo $comment['id'];?>').modal('hide');
            document.getElementById('result-box').innerHTML += response;
        });
    });
});
</script>

工作示例“报告表格”使用相同的编码

<!-- REPORT MODAL -->
<div class="modal fade report_post_<?php echo $post['id'];?>" id="report_post_<?php echo $post['id'];?>" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <b><center><div class="modal-header">Report Post</div></center></b>
            <form id="reportForm_<?php echo $post['id'];?>" class="horiziontal-form" action="../Pages/fun.php?action=reportPostForm" method="post">
                <center><textarea name="report" style="width:80%; height:200px; margin-top:20px; resize:vertical;" placeholder="Please describe your Report!"></textarea></center>
                <input type="hidden" name="addedby" class="form-control col-md-7 col-xs-12" value="<?php echo $myRow['id']; ?>" />
                <input type="hidden" name="image_id" class="form-control col-md-7 col-xs-12" value="<?php echo $post['id']; ?>" />
                <div class="modal-footer"><input type="submit" class="btn btn-danger" name="submit" value="Report" /></div>
            </div>
        </div>
    </form>
</div>
<!-- END OF REPORT MODAL -->


<script>
$(function(){

    $("#reportForm_<?php echo $post['id'];?>").submit(function(event){
        event.preventDefault(); //prevent default action
        var post_url = $(this).attr("action"); //get form action url
        var request_method = $(this).attr("method"); //get form GET/POST method
        var form_data = $(this).serialize(); //Encode form elements for submission

        $.ajax({
            url : post_url,
            type: request_method,
            data : form_data
        }).done(function(response){ //
            $('#report_post_<?php echo $post['id'];?>').modal('hide');
            document.getElementById('result-box').innerHTML += response;
        });
    });
  });
</script>

Answer 1

您似乎正在使用表单提交事件处理程序的错误选择器。您正在使用：

$("#reply_comment_<?php echo $comment['id'];?>").submit(function(event){
    // ...
});

然而reply_comment_<?php echo $comment['id'];?>是模态的ID（即div元素）。根据{{3}}：

当用户尝试提交表单时，会将提交事件发送给元素。它只能附加到＆lt; form＆gt;元件。

表单的ID为replyForm_<?php echo $comment['id'];?>，因此您应该使用它：

$("#replyForm_<?php echo $comment['id'];?>").submit(function(event){
    // ...
});

AJAX .done（）没有按预期工作

1 个答案: