提交表单时在浏览器中显示加载

Question

我正在使用 AJAX 来获取一些数据并填写表格。数据非常大，因此从数据库获取并填写字段需要一些时间，所以在做这些事情的同时，我正在显示加载图标。

现在表单中有一个提交按钮，我们想要 - 在加载图标消失之前不应提交该表单。到目前为止，我已经完成了这件事。

我正在使用阻止默认值 - 如果用户在 AJAX 完成工作之前点击提交按钮并且加载图标消失，并且在 AJAX 完成工作之后提交表单。

但现在的问题是，如果我点击提交 - 因为阻止默认设置不会在浏览器选项卡中显示加载图标（因此用户可能认为表单提交按钮不起作用并多次点击它，（我们得到了这个数据来自谷歌分析）） 但是表单会在 AJAX 完成后自动提交。

是否可以显示“浏览器选项卡加载图标”？

我知道其他事情，例如（隐藏提交按钮等）

这是我的一段代码：

$("#formsech").submit(function(event){
submit = -1;
    if ( $("#loading").css('display') == 'none' ){
submit = 1;
    }
    else{
 event.preventDefault();
    }
});

setInterval(function(){
    if(submit == -1){

if($("#loading").css('display') == 'none' ){
    submit = 1;
}
}
}, 100);

setInterval(function(){ 
if(submit ==  1){
$("#formsech").submit();
submit = 0;
}
}, 100);

任何帮助将不胜感激。

Answer 1

如果你使用 AJAX，你可以这样做：

$(form).submit(function (e) {
  e.preventDefault();
  $(form).css("cursor", "loading");
  $("#loading").show();
  $.post("/path/to/url", $(form).serialize(), function () {
    $("#loading").hide();
    $(form).css("cursor", "initial");
    alert("Saved");
  });
});

使用setTimeout 的更好示例仅用于演示目的。

$(function() {
  $(".loading").removeClass("hidden").hide();
  $("#myform").submit(function() {
    $(".loading").fadeIn();
    setTimeout(function() {
      $(".loading").fadeOut();
    }, 2000);
  });
});

* {
  font-family: 'Segoe UI', sans-serif;
}
.loading {
  background: url("http://www.arabianbusiness.com/skins/ab.main/gfx/loading_spinner.gif") center center no-repeat;
  width: 150px;
  height: 150px;
  position: absolute;
  z-index: 1;
  opacity: 0.5;
}
.hidden {
  display: none;
}
#myform {
  display: block;
  position: relative;
  width: 150px;
  line-height: 150px;
  text-align: center;
  border: 1px solid #ccc;
  overflow: hidden;
}

<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<form action="." id="myform">
  <div class="loading hidden"></div>
  &nbsp;
  <input type="submit" />&nbsp;
</form>

setTimeout 仅用于模拟 AJAX 延迟。 z-index 将不允许用户按下提交按钮。

Answer 2

您可以在页面中使用以下 html。

<div id="overlay"></div>

css 将是

#overlay {
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 99;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: none;
}

在ajax调用之前使用以下代码

$("#overlay").show(500);

ajax 调用完成后写这个：

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