Question

我正在使用jQuery将表单数据提交到表单动作中的文件中。但是，当我提交表单时，浏览器会重定向到该操作（comment.php）。我不知道为什么这是因为e.preventDefault()应该停止浏览器的重定向。理想情况下，我希望浏览器不会重定向并保留在当前页面上（index.php）。

jQuery的：

<script type='text/javascript'>
    $('document').ready(function(){
        $('.commentContainer').load('../writecomment.php');
        $('.answerContainer').on('submit', 'form', function(e){
            e.preventDefault();
            var form = $(this).closest('form');
            $.post($(form).attr('action'), 
            $(form).serialize(), 
            function() {
                $('.commentContainer').load('../writecomment.php');
                $('.commentBox').val('');
            }
        });
    });
</script>

HTML表单：

<form method='POST' action='../comment.php'>
    //form contents
</form>

Answer 1

我认为您的selector和on方法无法正常运行。试试：$('form').on('submit', function(e) {您确定已将表单包装在具有类answerContainer的元素中吗？

然后确保不要使用$.post使用$.ajax：

和this在元素内部，例如。 form不是第一个选择器.answerContainer。

$('document').ready(function(){

    $('.commentContainer').load('../writecomment.php');

    $('.answerContainer').on('submit', 'form', function(event) {
        event.preventDefault();
        var $form = $(this);
        $.ajax({
            "url": $form.attr("action"),
            "data": $form.serialize(),
            "type": $form.attr("method"),
            "response": function() {
                $('.commentContainer').load('../writecomment.php');
                $('.commentBox').val('');
            }
        });
    });
});

表单仍然在preventDefault上提交

1 个答案: