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

Jxdwuao

在我们平常使用的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"> </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"> </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; }