使用jQuery提交表单后如何显示loading-div？

Question

我是Javascript和jQuery的新手。用户提交表单后，我想显示“ loading-gif”，但无法弄清楚我的代码为什么不起作用。就是这种情况：

那是我的javascript（在html页面底部的jquery之后初始化）：

    $('.formtrigger').click(function() {
      $('#loading').show();
      $('#form').submit();
    });

当我单击按钮时，表单已提交，但未显示loading-div。我尝试了行“ $（'＃loading'）。show（）;” 而不将其绑定到点击事件上，并且可以正常工作。我也尝试了这段代码：

$('.formtrigger').click(function() {
    alert('blablabla');
    $('#form').submit();
});

并且两个语句都起作用！首先显示警报，然后提交表单。为什么其他代码不起作用？

提前致谢。

编辑：我也尝试了以下变种而没有成功

$('.formtrigger').click(function() {
    $('#form').submit();
});
$('#form').submit(function() {
    $('#loading').show();
});

和

$('.formtrigger').click(function() {
    $('#loading').show();
    window.setTimeout($('#form').submit(), 5000);
});

和

 //HTML
 <button type="submit">...</button>
 //JS
 $('#form').submit(function() {
     $('#loading').show();
 });

Answer 1

在中.submit()，显示您的加载微调器：

$("#loading").show();

而你的后.submit()完成，隐藏它：

$("#loading").hide();

display: none;由于上面的jQuery只是更改了您指定元素的css属性，因此默认情况下将您的微调器设为默认状态。

我为您提供了一个简单的演示，其中具有AJAX函数，可从文本输入中回显您的消息。它将显示一个加载微调框，直到成功为止。

小提琴演示