Ajax 表单提交 preventDefault() 不起作用

Question

所以基本上我想在显示页面内容之前显示加载 gif。所以我做了两个这样的div。

<div id="wait"><img src="img/loading.svg" style="width:max-width;height:50px;"></div>
<div id="content"></div>

我添加了一些 javascript 来隐藏加载 gif 并显示如下所示的内容

 $('#content').css('display', 'none');


$(document).ready(function() { setTimeout(function() {
$('#wait').css('display', 'none');
}, 3000);

setTimeout(function() {
$('#content').load('portfolio.html');
}, 3100);});

现在当我这样做时，下面显示的表单 ajax 不起作用。

$(document).ready(function() {
//Validate Form Start
var form = $('#form');

form.submit(function(evt) {
    evt.preventDefault();
    evt.stopPropagation();
    console.log(form.serialize());

$.ajax({
    type: 'POST',
    url: form.attr("action"),
    data: form.serialize(),
    success: function(response) {
        console.log("Email Sent.");
        $('.form').html('Message Sent! Await response.');
        $('.form').attr('class', 'btn btn-success btn-lg btn-block form');
        function submitTimeout() {
            $('.form').html('Send Another Message?');
            $('.form').attr('class', 'btn btn-danger btn-lg btn-block form');
        }
        setTimeout(submitTimeout, 3000);
        form.each(function(){
            this.reset();
            });
        }
    });
});
//Validate form end.});

它不使用 ajax 提交表单。尽管提到了 preventDefault() 方法，但它使用默认提交。请问有什么解决办法吗？

Answer 1

在提交函数的末尾添加return false;。它会成功的。

Answer 2

我发现在 form.onsubmit 事件上 return false 比 e.preventDefault() 效果更好。

像这样：

form.onsubmit = function(evt){
    ...
    $.ajax({ ...
    ...
    // At the end of the function
    return false;
}