javascript - AJAX .done()无法按预期工作

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


  默认ajax，行：data : form_data->中断页面，php功能不起作用





  添加“;”在该行之后data : form_data;->不显示任何内容，但是PHP函数起作用并在数据库中插入“ reply”





  应该看起来像调用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>

最佳答案

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

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

但是reply_comment_<?php echo $comment['id'];?>是模式的ID（即div元素）。根据docs：


  当用户尝试提交表单时，submit事件被发送到一个元素。它只能附加到元素。


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

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