怎么样只写一次代码,能让系统中所有ajax请求都伴随“菊花转” ?
1. 去下载一个转菊花的gif, 放到系统中,让它有个url
2. 写一个公用的js文件如my.js, 并在每个页面中都包含它。
3. 在my.js中写两部分代码
//1. 文档加载完后,把菊花的动画声明为一个居中、暂时隐藏的dom元素,并把它加入到body中 $( document ).ready(function() { //生成一个ajax loading dom $('body').append('<div style="display:none;width:100px;margin:0 auto;position:fixed;left:45%;top:45%;" id="loading"><img src="http://someSite/juhua.gif" /></div>'); });
//2. 全局配置:ajax请求开始时显示动画,结束时(success 或 error)隐藏动画 $(document).ajaxStart(function () { $("#loading").show(); }); $(document).ajaxComplete(function () { $("#loading").hide(); });
注意事项:
1. 如果某个ajax请求不需要菊花,则在这次请求中设置global为false, 即不使用全局设置:
$.ajax({ url: ... type: "post", global: "false", ... });
2. 已经发现一个问题:如果在某个ajax的callback中启动了另一个ajax请求,则第二个ajax请求启动时不会触发ajaxStart()事件,导致系统执行第2个ajax请求时不会出现菊花。一个简单的解决办法就是确保第2个请求能够执行的够快,这样即使没有菊花用户体验也能接受。