提交长Javascript请求时显示等待消息_Javascript_Jquery_Modal Dialog_Wait

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

javascript jquery

提交长Javascript请求时显示等待消息,javascript,jquery,modal-dialog,wait,Javascript,Jquery,Modal Dialog,Wait,我想在点击表单按钮后显示动画gif 更新：我在这里找到了一个解决方案：我将其与动画gif（而不是登录表单）相结合，以获得我想要的效果我在脚本中使用了.show（）方法，如下所示： $(document).ready(function () { $("#my_submit").click(function(e) { console.log("please wait..."); $( "#processing_gif" ).show();

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

更新：我在这里找到了一个解决方案：

我将其与动画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>

以下是完整的原始教程：

<!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>

按钮{宽度：150px；填充：10px；背景色：FF8C00；框阴影：-8px 8px 10px 3px rgba（0,0,0,0.2）；字体大小：粗体；文本装饰：无；}封面位置：固定；顶部：0；左侧：0；背景：rgba（0,0,0.6）；z索引：5；宽度：100%；高度：100%；显示：无；}登录屏幕{高度：380px；宽度：340px；边距：0自动；位置：相对；z索引：10；显示：无；背景：url（login.png）无重复；边框：5px实心#cccccccc；边框半径：10px；}loginScreen:target，#loginScreen:target+#cover{显示：块；不透明度：2；}。取消{显示：块；位置：绝对；顶部：3px；右侧：2px；背景：rgb（245245）；颜色：黑色；高度：30px；宽度：35px；字体大小：30px；文本装饰：无；文本对齐：居中；字体重量：粗体；}

ahjquery-叹气。您必须对此进行调整，以获得所需的样式/表示，但我将使用简单的旧JavaScript为您指出大致方向

在需要的页面上添加带有gif的图像标记

  < img src='loading.gif'/>

将id和“显示：无”添加到图像样式以隐藏它

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

去掉submit按钮标记中的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>


//听你的按钮点击
document.getElementById（'add-all-to-cart'）。addEventListener（'click'，
功能（事件）{
//这是单击按钮时运行的代码
//获取我们单击的按钮
var target=event.target | | event.srcTarget；
//将该按钮设置为禁用
target.disabled=true；
//显示加载图像
document.getElementById（'loadingImg'）.style.display='block'；
}

您只需在$.ajax（参数）之前添加$（“我的图像选择器”）.show（），并在出现“成功”或“错误”时通过添加$（“我的图像选择器”）.hide（）将其隐藏

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

我建议首先更改后端以接受多个值，这样客户端就不会发送任意数量的数据requests@epoch-我不介意在等待过程中禁用该按钮。但我不想更改工作代码。我只想添加一个UI提示，提示它将在等待几秒钟后完成按钮被单击。类似于此的内容看起来与我正在尝试的内容类似。但到目前为止，我无法使该解决方案起作用：我认为您的脚本缺少结尾（

）；

，但即使在添加之后，我也看不到加载的.gif图像。我在

函数（事件）之后添加了一个console.log行{

我也看不到日志消息。我很想使用.ajaxStart。我正在查看文档。你介意给我一个基于我的代码的工作示例吗。我开始时没有经验，所以很难理解其中一些的上下文…谢谢。我找到了这个。它不是基于你的代码，但它的一般用法是ere.Hope it help=）我尝试了你建议的两种方法，但两种方法都无法奏效。根据你的第一个建议，你认为我应该在哪里添加

$（“我的图像选择器”）。show（）

？我在

$（“#将所有内容添加到购物车”）。单击（函数（e）{

我根据你的答案更新了我的代码。也许你可以看到它为什么不起作用。我不能。我测试了第一个建议，它对我来说似乎很好。我会在浏览器中查看控制台（例如chrome中的f12）。可能是你遇到了另一种错误：/（我问我自己为什么你要将请求发送到js文件（？）

 <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>