首页 > 代码库 > 一款基于jQuery Ajax的等待效果
一款基于jQuery Ajax的等待效果
特别提示:本人博客部分有参考网络其他博客,但均是本人亲手编写过并验证通过。如发现博客有错误,请及时提出以免误导其他人,谢谢!欢迎转载,但记得标明文章出处:http://www.cnblogs.com/mao2080/
1、效果示例
1、加载中效果
2、加载后效果
2、代码样例
1 var ajaxUtil = { 2 /**为保证load图标不会一闪而过,小于600毫秒的请求将延时加载*/ 3 loadShowTime:600, 4 /** 5 * Ajax请求 6 * @param {Object} url 请求的url 7 * @param {Object} params 参数(json类型,如:{userName:‘admin‘, email:‘mao2080@sina.com‘}) 8 * @param {Object} successCallBack 自定义函数-成功时返回 9 * @param {Object} errorCallBack 自定义函数-失败时返回 10 * @param {Object} args 其他参数{"loadingId":null} 11 */ 12 ajaxRequest : function(url, params, successCallBack, errorCallBack, args){ 13 args = ajaxUtil.showLoading(args); 14 $.ajax({ 15 url:url, 16 data:params, 17 type:"get", 18 dataType:"json", 19 async:true, 20 success:function(res){ 21 if(res.success || res.code == 200){ 22 args.timestamp = new Date().getTime()-args.timestamp; 23 if(args.timestamp || args.timestamp > ajaxUtil.loadShowTime){ 24 window.setTimeout(function(){ 25 ajaxUtil.hideLoading(args); 26 successCallBack(res); 27 }, ajaxUtil.loadShowTime-args.timestamp); 28 }else{ 29 ajaxUtil.hideLoading(args); 30 successCallBack(res); 31 } 32 }else{ 33 ajaxUtil.hideLoading(args, true); 34 if(errorCallBack){ 35 errorCallBack(res); 36 } 37 } 38 }, 39 error:function(res){ 40 ajaxUtil.hideLoading(args); 41 alert("请求失败..."); 42 }, 43 }); 44 }, 45 /** 46 * 显示加载loading 47 * @param {Object} args 48 */ 49 showLoading:function(args){ 50 args = !args?{}:args; 51 args.timestamp = new Date().getTime(); 52 if(args.loadingId){ 53 var container = $(args.loadingId); 54 if(container){ 55 container.css({"position":"relative"}); 56 container.append(‘<div class="loading" style="width:60px; height:24px; position:absolute;left:50%;top:50%;margin-left:-30px;margin-top:-12px;"><img src="http://www.mamicode.com/img/loading-0.gif"/></div>‘); 57 } 58 } 59 return args; 60 }, 61 /** 62 * 隐藏加载loading 63 * @param {Object} args 64 */ 65 hideLoading:function(args){ 66 if(args.loadingId){ 67 var container = $(args.loadingId); 68 if(container){ 69 container.find(‘.loading‘).remove(); 70 } 71 } 72 } 73 } 74 75 $(function(){ 76 ajaxUtil.ajaxRequest("data.json", null, function(res){ 77 //处理请求成功 78 $("#userName").html(res.data.userName); 79 $("#email").html(res.data.email); 80 }, function(res){ 81 //处理请求失败 82 }, {loadingId:"#test1"}) 83 });
3、资料下载
load-demo.rar
一款基于jQuery Ajax的等待效果
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。