老项目page跳转增加loading效果

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也不需要进行任何修改。