jquery – 在按钮上点击显示“加载”动画

前端之家收集整理的这篇文章主要介绍了jquery – 在按钮上点击显示“加载”动画前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我想做一些非常简单的事情。
我的页面上有一个按钮
<form action="/process" method="POST">
   <input class="btn btn-large btn-primary" type="submit" value='Analyze Topics'>
    </form>

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

但是我一直在努力奋斗。

如何实现?

解决方法

如果你使用ajax(尽可能简单)

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

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

>点击按钮时显示图像,并在成功功能上再次隐藏

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

确保您也可以将图像隐藏在ajax错误回调上,以确保gif隐藏,即使ajax失败。

猜你在找的jQuery相关文章