提交长 Javascript 请求时显示等待消息答案

【问题标题】：Showing a Wait Message When Submitting Long Javascript Requests提交长 Javascript 请求时显示等待消息
【发布时间】：2014-11-23 04:56:54
【问题描述】：

我想在单击表单按钮后显示动画 gif。

更新：我在这里找到了解决方案：http://www.corelangs.com/css/box/fulloverlay.html

我将它与动画 gif（而不是登录表单）结合起来以获得我想要的效果。

我在脚本中使用了 .show() 方法，如下所示：

$(document).ready(function () {  
    $("#my_submit").click(function(e) { 
        console.log("please wait...");
        $( "#processing_gif" ).show();
        $( "#cover" ).show();

在我的表单中，我使用了这些 div：

        <div id="processing_gif"></div>
        <div id="cover"></div>

我使用了这个 CSS：

#processing_gif {
   position:fixed; 
   top:0; 
   left:0; 
   z-index:999; 
   width:100%;
   height:100%;
   opacity:0.8;
   background: url('/files/animation_processing.gif') center center no-repeat; 
   display:none;
}

#cover{ 
  position:fixed; 
  top:0; left:0; 
  background:rgba(256,256,256,0.9); 
  z-index:1; 
  width:100%; 
  height:100%; 
  display:none; 
}

这是完整的原始教程：

<!DOCTYPE html> <html > <head> <style type="text/css"> .button { width: 150px; padding: 10px; background-color: #FF8C00; box-shadow: -8px 8px 10px 3px rgba(0,0,0,0.2); font-weight:bold; text-decoration:none; } #cover{ position:fixed; top:0; left:0; background:rgba(0,0,0,0.6); z-index:5; width:100%; height:100%; display:none; } #loginScreen { height:380px; width:340px; margin:0 auto; position:relative; z-index:10; display:none; background: url(login.png) no-repeat; border:5px solid #cccccc; border-radius:10px; } #loginScreen:target, #loginScreen:target + #cover{ display:block; opacity:2; } .cancel { display:block; position:absolute; top:3px; right:2px; background:rgb(245,245,245); color:black; height:30px; width:35px; font-size:30px; text-decoration:none; text-align:center; font-weight:bold; } </style> </head> <body> <div align="center"> <br><br><br><br> <a href="#loginScreen" class="button">Click here to Log In</a> </div> <div id="loginScreen"> <a href="#" class="cancel">&times;</a> </div> <div id="cover" > </div> </body> </html>

【问题讨论】：

我建议首先将后端更改为接受多个值，这样客户端就不会发送任意数量的请求
@epoch - 我不介意在等待期间禁用按钮。但我不想更改工作代码。我只是想添加一个 UI 线索，即单击按钮后需要几秒钟的时间。
这样的事情看起来与我正在尝试做的事情相似。但到目前为止，我无法让该解决方案发挥作用：west-wind.com/wconnect/weblog

标签： javascript jquery modal-dialog wait

【解决方案1】：

您可以在 $.ajax(params) 之前添加 $("my_image_selector").show() 并在“成功”或“错误”发生时通过添加 $("my_image_selector").hide()

或者您可以使用 .ajaxStart 和 .ajaxStop。 see jquery docs

【讨论】：

我很想使用 .ajaxStart。我在看文档。您介意根据我的代码给我一个工作示例吗？我从没有经验开始，所以很难弄清楚其中一些的背景......谢谢
我找到了这个tutorialspoint.com/cgi-bin/practice.cgi?file=jquery_121。它不是基于您的代码，但它的使用的一般概念就在那里。希望对你有帮助 =)
我尝试了您建议的两种方法，但我无法让任何一种工作。根据您的第一个建议，您认为我应该在哪里添加$("my_image_selector").show()？我在$("#add-all-to-cart").click(function(e) {之后添加了它
我根据您的回答更新了我的代码。也许您可以看到为什么它不起作用。我不能。
我测试了第一个建议，对我来说似乎效果很好。我会在浏览器中查看控制台（例如 chrome 中的 f12）。可能是您遇到了另一种错误：/（我问自己为什么要将请求发送到 js 文件（？））

【解决方案2】：

啊 jquery - 叹息。您将不得不对其进行调整以获得所需的样式/演示，但我将使用普通的旧 JavaScript 为您指明大方向。

在你想要的页面上添加一个带有你想要使用的 gif 的图像标签
```
  < img src='loading.gif'/>
```

给图片样式添加一个id和“display:none”来隐藏它

<img id='loadingImg'  style='display:none;' src='loading.gif'/>

去掉提交按钮标签中的 onclick 处理程序，而是将这样的代码放在表单下方

 <script>
       //listen for click on your button
       document.getElementById('add-all-to-cart').addEventListener('click',
           function(event){
                //this is the code that runs when the button is clicked
                //get the button we clicked on
                var target=event.target||event.srcTarget;
                //set that button to disabled
                target.disabled=true;
                //display the loading image
                document.getElementById('loadingImg').style.display='block';  
            }

</script>

【讨论】：

我认为您的脚本缺少结束 ); 但即使在添加后我也没有看到 loading.gif 图像。我在function(event){ 之后添加了一个console.log 行，我也没有看到日志消息。