jQuery实现页面查询等待时的交互效果

分类:前端技术    发布时间:2019-03-29 11:37:28
思路如下:
在触发请求后台之前便开始等待效果
在收到后台返回数据时候便取消等待效果

示例:
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 

标签: jQuery

阅读(317)┆ 评论(0) ┆ (0) ┆ 返回博客首页


发表我的评论

欢迎您: | 退出登录


文章评论