jquery - 单击按钮时显示 "loading"动画

Question

我想做一些非常简单的事情。 我的页面中有一个按钮。

<form action="/process" method="POST">
   <input class="btn btn-large btn-primary" type="submit" value='Analyze Topics'>
    </form>

现在我想要的是当用户按下这个提交按钮时。它显示“正在加载”gif 动画，直到它从服务器获得响应。

但我一直在苦苦挣扎。

我该如何实现？

Answer 1

如果您正在使用 ajax(使其尽可能简单)

1. 将加载的 gif 图像添加到 html 中并使其隐藏(现在使用 html 本身的样式，您可以将其添加到单独的 CSS 中):

   <img src="path\to\loading\gif" id="img" style="display:none"/ >
   

2. 点击按钮时显示图像，成功时再次隐藏

   $('#buttonID').click(function(){
     $('#img').show(); //<----here
     $.ajax({
       ....
      success:function(result){
          $('#img').hide();  //<--- hide again
      }
   }
   

确保在 ajax 错误回调中隐藏图像，以确保即使 ajax 失败 gif 也隐藏。