2019.4.17 加载动画的实现与ajax的使用

先简单说一下任务要求，在一个系统中的所有保存，预览以及下载的地方实现加载动画。

首先我是使用的EasyUI，那么如何利用它实现加载动画呢？参考了一些博客，大致是这样子的：

// 建立一个loadanimation.js文件，然后写入以下代码：

//加载的动画
function ajaxLoading() {
    $("<div class=\"datagrid-mask\"></div>").css({ display: "block", width: "100%", height: $(window).height() }).appendTo("body");
    $("<div class=\"datagrid-mask-msg\"></div>").html("正在处理，请稍候。。。").appendTo("body").css({ display: "block", left: ($(document.body).outerWidth(true) - 190) / 2, top: ($(window).height() - 45) / 2 });
}

//加载的动画消失
function ajaxLoadEnd() {
    $(".datagrid-mask").remove();  //也可以使用hide()方法
    $(".datagrid-mask-msg").remove();

// 使用ajax调用
$.ajax({
                "url": 路径名,
                "type": 'post',
                "data": data,
                "dataType": "json",
                "beforeSend": ajaxLoading,  //发送请求前可修改 XMLHttpRequest 对象的函数
                "success": function (res) {  //请求成功后回调函数。这个方法有两个参数：服务器返回数据，返回状态
                    if (res.error == "") {   //请求失败时将调用此方法。这个方法有三个参数：XMLHttpRequest 对象，错误信息，（可能）捕获的错误对象
                        ajaxLoadEnd();
                    }
                },
                "complete": function () {  //请求完成后回调函数 (请求成功或失败时均调用)。
                    window.parent.addTab('等待执行','/Admin/ShowMissionjqgrid?loc=@ViewBag.loc&lander=@ViewBag.lander1&statue=等待执行');
                },
                "error": function (res) {  //请求失败时将调用此方法。这个方法有三个参数：XMLHttpRequest 对象，错误信息，（可能）捕获的错误对象
                    alert(res.error)
                }
            });

在上述的ajax获取数据中，我的想法是在加载动画结束后可以出现一个alert弹出框，如下：

success:function(e){
    if(e.error == ""){
        ajaxLoadEnd();
        alert("保存成功”）
    }
}

我的想法是加载的动画加载完以后出现弹出框。然而加载的动画正在加载的时候，alert弹出框就会出现，不符合我的想法。后来查看了一些博客，大致意思就是可以设置ajax的async属性，将它变为false，也就是同步的。然而设置以后，加载动画都不会出现啦，最后我只能把alert弹出框给去掉啦。有遇到相同问题的小伙伴希望可以留言告诉我如何解决这个问题哦。

当然也可以使用amazeUI去实现这个功能，可以使用它里面的模态窗口去实现，代码如下：

<div class="am-modal am-modal-loading am-modal-no-btn" tabindex="-1" id="my-modal-loading">
    <div class="am-modal-dialog">
        <div class="am-modal-hd">正在载入...</div>
        <div class="am-modal-bd">
            <span class="am-icon-spinner am-icon-spin"></span>
        </div>
    </div>
</div>

// js调用
var $modal = $('#my-modal-loading'); //loading
$modal.modal();
$modal.modal("close");  

转载于:https://www.cnblogs.com/niupeinan/p/10729040.html