使用Ajax加载数据过程中的显示loading效果

使用Ajax加载数据过程中的显示loading效果

html中添加代码如下:

<style>
    #my-loading {
        position: fixed;
        left: 50%;
        top: 50%;
        z-index: 10000;
        display: none;
    }
</style>
    
    
<div id="my-loading">
    <img src="{{IMG_PATH}}msg_img/my-loading.gif" style="width:24px;height:24px" />
</div>

单独处理

$.ajax({
    ...
    beforeSend: function (XMLHttpRequest) {
        $('#my-loading').show();
    },
    success: function(data) {
        console.log(data);
    },
    error: function(e) {
        alert('文件上传失败');
    },
    complete: function (XMLHttpRequest) {
        $('#my-loading').hide();
    }
});

全局配置ajax loading效果

$(document).ajaxStart(function () {
    $('#my-loading').show();
}).ajaxStop(function () {
    $('#my-loading').hide();
});

另一种全局配置方式

$.ajaxSetup({
    //ajax请求之前
    beforeSend: function () {
        $('#my-loading').show();
    },
    //ajax请求完成，不管成功失败
    complete: function () {
        $('#my-loading').hide();
    },
    //ajax请求失败
    error: function () {
    }
});