上传或提交等待过程图标loading.gif的实现

最新推荐文章于 2024-05-30 14:22:46 发布

追赶的蜗牛

最新推荐文章于 2024-05-30 14:22:46 发布

阅读量1w

点赞数

分类专栏： CSS ajax jQuery 文章标签：加载中效果实现 ajax beforeSend complete

本文链接：https://blog.csdn.net/yansong_8686/article/details/50361573

版权

jQuery 同时被 3 个专栏收录

22 篇文章 0 订阅

订阅专栏

CSS

8 篇文章 0 订阅

订阅专栏

ajax

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title></title>
    <style>
.loadingWrap{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	z-index:300;
	background-image:url(loading.gif);
	background-repeat:no-repeat;
	background-position:center center;
	background-color:#000;
	background-color:rgba(0,0,0,0.5);
	filter:alpha(opacity=50);
}
</style>
    
</head>
<body>
	测试 加载中。。。
    <div class="loadingWrap"></div>
</body>
</html>

ajax提交表单后的等待，应当做如下处理：

$.ajax(  
        type:"post",  
        url:basePath + “xxx/xxx/xx.do”,  
        data:{"idMerchant":idMerchant},  
        dataType:"json",  
        success:function(data){//后端返回json格式的字符串  
            if(!data){//成功不需要提示
                alert("提交失败！");
             }
        },  
        error:function(){  
            alert("查询异常，请稍后再试或联系管理员。。。");  
        },
        beforeSend: function(){  
            $("<div class="loadingWrap"></div>").appendTo("body");  
        }, 
        complete: function(){  
            $(".loadingWrap").remove();  
        }
  
    });

beforeSend和complete中处理！！！