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事件的返回false比e.preventDefault（）更好用于此目的。

像这样：

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

Ajax表单提交preventDefault（）不起作用

2 个答案: