公司页面的AJAX用户体验设计

在我们平常使用的Form 之外，添加了一个iframe。

<iframe id="yhnh" name="yhnh" src="about:blank" width="0" height="0" frameborder="0" scrolling="no"></iframe>

 

 

 

  设置Form的target属性

  <html:form action="/yhnhShip.do?method=doAdd" target="yhnh">

  这样，提交的时候，页面不会跳转。服务端工作由这个iframe来完成。

  提交时将本页面用一个层锁定。并且显示提示信息。

<!-- 锁定层后面所有控件-->  
<div id="ly" style="position: absolute; top: 0px; filter: alpha(opacity=60); background-color: #777;z-index: 2; left: 0px; display: none;"></div>  

  

!--  浮层框架开始 -->
<div id="Layer2" align="center" style="position: absolute; z-index: 3; left: expression((document.body.offsetWidth-540)/2); top: expression((document.body.offsetHeight-170)/2);
    background-color: #fff; display: none;" >
    <table width="300" border="0" cellpadding="2" cellspacing="2" style="border:0 solid #e7e3e7; border-collapse: collapse">
        <tr>
            <td style="background-color: #73A2d6; color: #fff; padding-left: 4px; padding-top: 2px;
                font-weight: bold; font-size: 14px;" height="25px" valign="middle">请稍候...</td>
        </tr>
        <tr valign="bottom">
            <td height="27" align="center">&nbsp;</td>
        </tr>
        <tr valign="bottom">
        	<td align="center" >正在进行服务端处理 ...</td>
        </tr>
        <tr valign="bottom">
        	<td align="center" ><img src="../images/working.gif" /></td>
        </tr>
        <tr valign="bottom">
            <td height="27" align="center">&nbsp;</td>
        </tr>
    </table>
</div>
<!-- 浮层框架结束  -->

 

 锁定页面JS的方法： 

 

//锁定页面控件，并弹出浮动层
function locking_control(){   
  $('ly').style.display="block"; 
  $('ly').style.width = document.body.clientWidth;    
  $('ly').style.height = document.body.clientHeight;    
  $('Layer2').style.display = 'block';
}  

// 关闭浮动层
function close_div () {   
	$('ly').style.display='none';
	$('Layer2').style.display='none';
}

 

 

体验效果如下：

 

 

返回的页面也在iframe之中。

在这页面加载处理错误信息，返回成功信息等操作。

 

function init() {    
  var error = $("error").value.strip();   
  if (error.length > 0) {    
    alert(error);   
    if (window.parent) {   
      window.parent.saveFail(policy);   
    }    
  } else {    
   if (window.parent) {   
      window.parent.saveSuccess(policy);    
   }
  }
} 

 

  成功返回后，禁止原页面的表单，成为预览方式。

 

/*
 * 禁用表单
 */
function disableForm() {
	var form = $('yhnhShipForm');
	form.disable();
	form.disabled = true; 
}