ajax 返回数据前显示gif图de

最新推荐文章于 2021-08-06 10:30:57 发布

原创最新推荐文章于 2021-08-06 10:30:57 发布 · 644 阅读

1 ·

CC 4.0 BY-SA版权

HTML 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一种在登录过程中使用异步请求并结合模态框显示加载动画的方法，以提升用户体验，避免用户因等待时间过长而重复操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用场景

比如在登录时，登录对接了其他的功能导致登录验证需要1~5秒，但是这个异步过程不显示些什么用户以为点击登录没有效果，然后重复操作，所以显示一个等待的gif图会友好一些。

ajax代码如下，主要是 beforeSend 和 complete

$.ajax({
    url: "{% url 'easybet' %}",
    type: "post",
    beforeSend:function () {
        //请求之前，显示一个boostrap模态框
        $("#waitModal").modal('show')
    },
    complete:function () {
        //ajax请求结束后隐藏这个模态框
        $("#waitModal").modal('hide')
    },
    data: {email:email, pwd:pwd},
    success: function (args) {
        alert(args)
    }
});

bootstrap模态框代码如下

<div id="waitModal" class="messages-modal modal fade" data-backdrop="static">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" style="color:#000;font-size:32px;font-weight:700;margin:20px 0 5px;text-align:center">just a minute</h4>
            </div>
            <div class="modal-body" style="background:url(/static/Register_EasyBet/loading-svg.svg) 50% no-repeat;background-size:200px;width:100%;height:400px"></div>
        </div>
    </div>
</div>

上面我是调用一个bootstrap的模态框，然后在模态框中显示一个加载中的gif即可