js ajax 请求时loading效果

使用bootstrap做页面时候，基于jQuery Ajax请求时loading效果代码，jQuery loading Ajax遮罩层。

1、首先需要引入jQuery库【你可以自己去jQuery官方下载或者用他们的cdn】

<script src="https://wangshengxian.com/common/js/jquery-3.3.1.min.js"></script>

2、HTML 给个 div块

<div id="loading-mask">
    <div id="loading-spinner"></div>
</div>

<!-- 点击示例 开始 -->
<form class="forms-sample" id="form-data">
    <button type="button" id="submitData" class="btn btn-primary me-2">提交</button>
</form>
<!--点击示例 结束-->

3、添加CSS样式【遮罩层】

<style>
    #loading-mask {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 9999;
        display: none;
    }

    #loading-spinner {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 50px;
        height: 50px;
        border: 5px solid #fff;
        border-top-color: #888;
        border-radius: 50%;
        animation: spin 1s infinite linear;
    }

    @keyframes spin {
        0% {
            transform: translate(-50%, -50%) rotate(0deg);
        }
        100% {
            transform: translate(-50%, -50%) rotate(360deg);
        }
    }
</style>

4、封装一下JavaScript 显示 隐藏 方法 ，给其他地方如ajax请求时候调用

<script>
    // 显示遮罩层
    function showLoading() {
        $('#loading-mask').show();
    }

    // 隐藏遮罩层
    function hideLoading() {
        $('#loading-mask').hide();
    }
</script>

5、js Ajax请求调用 示例

<script>
    $("#submitData").click(function(){
       
        //序列化获得表单数据，结果为：user_id=12&user_name=John&user_age=20
        // var submitData=decodeURIComponent(data,true);
        //submitData是解码后的表单数据，结果同上
        $.ajax({
            type:"POST",//请求方式
            url:"url",//请求路径
            data:$('#form-data').serialize(),
            cache:false,//false是不缓存，true为缓存
            async:true,//true为异步，false为同步
            // 用于设置响应体的类型 注意 跟 data 参数没关系！！！
            dataType: 'json',
            beforeSend:function(){
                //请求前 打开loading
                showLoading();
            },
            success:function(obj){
                //请求成功
                console.log('success',obj);
            },
            complete:function(obj){
                //请求完成 隐藏loading
                hideLoading();
            },
            error:function(obj){
                //请求失败时
                console.log('error',obj);
                alert("请检查是否自身网络错误，或者是服务器异常了");
            }
        });

        return true; // 阻止默认 form 跳转
    });
</script>

&不带演示完整代码

<!--loading 开始-->
<div id="loading-mask">
    <div id="loading-spinner"></div>
</div>

<style>
    #loading-mask {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 9999;
        display: none;
    }

    #loading-spinner {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 50px;
        height: 50px;
        border: 5px solid #fff;
        border-top-color: #888;
        border-radius: 50%;
        animation: spin 1s infinite linear;
    }

    @keyframes spin {
        0% {
            transform: translate(-50%, -50%) rotate(0deg);
        }
        100% {
            transform: translate(-50%, -50%) rotate(360deg);
        }
    }
</style>

<script>
    // 显示遮罩层
    function showLoading() {
        $('#loading-mask').show();
    }

    // 隐藏遮罩层
    function hideLoading() {
        $('#loading-mask').hide();
    }
</script>
<!--loading 结束-->

参考文章：
https://blog.51cto.com/u_16175431/7059545