思路如下：
在触发请求后台之前便开始等待效果
在收到后台返回数据时候便取消等待效果
示例：
test.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<script src="/statics/js/jquery.min.js"></script>
<link rel="stylesheet" href="/statics/js/reloading.js">
</head>
<body>
<div class="form-group" style="margin-top: 5px;">
<label style="float: left;margin-top: 6px">请输入手机号 ：</label>
<input type="text" maxlength="128" style="width: 200px;" class="form-control" id="mobile">
<button class="btn btn-default" onclick="Submit()" style="margin-left: 2px">查询</button>
<hr style="margin-top: 10px">
<i id='icon'></i>
</div>
</body>
</html>
上面的html页面Font Awesome，它是图标字体库，这里使用了它里边的一个动态图标来表示等待状态
reloading.js
$(function(){
$('#btn1').click(function(){
$('#icon').addClass('fa fa-spinner fa-pulse fa-2x');
});
$("#btn2").click(function(){
$('#icon').removeClass('fa fa-spinner fa-pulse fa-2x');
})
});
这个js就是给id为icon的标签`增加和删除类(.fa fa-spinner fa-pulse fa-2x)便可实现了
具体的请求后台时的js例子
$(function () {
$('#btnSubmit').click(function (e) {
$.ajax({
beforeSend: function(){
$("#icon").addClass("fa fa-spinner fa-pulse fa-2x");
},
url: '/test',
type: 'POST',
dataType: 'json',
success: function (data) {
$("#icon").removeClass("fa fa-spinner fa-pulse fa-2x");
}
});
});
});
如上例子，在ajax请求中，利用beforeSend参数来实现等待效果的显示，然后在success中将效果去掉即可…..
更新动态图标效果可参考：http://www.runoob.com/font-awesome/fontawesome-tutorial.html
参考：https://blog.csdn.net/werewolf_st/article/details/49205567
