Page_A:查询页面
Action_A:查询Action
Page_B:结果页面
现在需要在Page_A点submit提交request到Action_A处理时,页面显示loading
1. 下载jquery-min.js (http://docs.jquery.com/Downloading_jQuery)
2. 写一个loading.js
function showBg(ct,content){ var bH=document.documentElement.clientHeight; var bW=$("body").width()+16; var objWH=getObjWh(ct); $("#fullbg").css({width:bW,height:bH,display:"block"}); var tbT=objWH.split("|")[0]+"px"; var tbL=objWH.split("|")[1]+"px"; $("#"+ct).css({top:tbT,left:tbL,display:"block"}); if ($("#fullbg") != null) { $(window).scroll(function(){resetBg()}); $(window).resize(function(){resetBg()}); } } function getObjWh(obj){ var st=document.documentElement.scrollTop; var sl=document.documentElement.scrollLeft; var ch=document.documentElement.clientHeight; var cw=document.documentElement.clientWidth; var objH=$("#"+obj).height(); var objW=$("#"+obj).width(); var objT=Number(st)+(Number(ch)-Number(objH))/2; var objL=Number(sl)+(Number(cw)-Number(objW))/2; return objT+"|"+objL; } function resetBg(){ if ($("#fullbg") != null) { var fullbg=$("#fullbg").css("display"); if(fullbg=="block"){ var bH2=$("body").height(); var bW2=$("body").width()+16; $("#fullbg").css({width:bW2,height:bH2}); var objV=getObjWh("dialog"); var tbT=objV.split("|")[0]+"px"; var tbL=objV.split("|")[1]+"px"; $("#dialog").css({top:tbT,left:tbL}); } } } function closeBg(){ $("#fullbg").css("display","none"); $("#dialog").css("display","none"); }
3. 在css里增加以下内容:
#fullbg{ background-color:Gray; display:none; z-index:3; position:absolute; left:0px; top:0px; filter:Alpha(Opacity=30); /*IE*/ -moz-opacity:0.4; /*Moz+FF*/ opacity:0.4; } #dialog{ position:absolute; width:200px; height:200px; display:none; z-index:5; }
4. 在Page_A
<script language="javascript" src="js/jquery-min.js"></script> <script language="javascript" src="js/loading.js"></script>5. 在Page_A里,增加div,用于显示loading:
<div id="fullbg"></div> <div id="dialog"> <div id="dialog_content"> <img src="images/loading_animation.gif"/> <br/> <div align='center'>Loading...</div> </div> <div style="text-align:center;"> <a href="#"onclick="closeBg();">Close</a> </div> </div>
6. 在Page_A里,修改原来数据提交的方法:
// Comment the old submit method, use jquery ajax post // oForm.submit(); // Create value which send by ajax var sendValue = ""; for (var i = 0; i < oForm.length; i++) { var formEl = oForm.elements[i].value; sendValue += oForm.elements[i].name + "=" + formEl + "&"; } sendValue = sendValue.substr(0, sendValue.length -1); // Show the loading showBg('dialog','dialog_content'); // Use jquery ajax method to submit data. $.ajax({ type:"POST", url:"meetingHistorySearch.do", data:sendValue, success:function(msg){ closeBg(); $('body').html(msg); } });
这里最重要的就是采用$('body').html(msg);的方法来显示Action_A的response,因为这样不需要修改Action_A的response的情况下来实现loading的功能。另外Page_B也不需要进行任何修改。