在ajax流行之前如何实现无刷新提交表单呢?其实用隐藏的iframe完全可以实现该功能,看一个测试的小例子。


ryAdd.jsp



<style type="javascript/text">

 // 全局方法
 function reset(){
      $("txtID").val("");
      $("txtName").val("");
 }
</script>

<form action="xy/ryAdd.action" target="frame">
<table>
 <tr>
  <td>编号</td>
  <td><input type="text" name="txtID" id="txtID"></td>
 </tr>
 <tr>
  <td>姓名</td>
  <td><input type="text" name="txtName" id="txtName"></td>
 </tr>
 <tr>
  <td colspan="2"><input type="submit" value="提交"></td>
 </tr>
 <tr>
  <td><span id="hint"></span></td>
 </tr>
</table>
</form>
<iframe name="frame" style="display:none"></iframe>



Action

public class ryAction
{
private String msg;

public String ryAdd()
{
 try
 {
  ...........
  msg = "添加成功";
 }
 cathc(Exception ex)
 {
  msg = ex.getMessage();
 }
 return "result";
}

..........省略getter,setter方法..............
}



strust.xml
<action name="ryAdd" class="cn.xy.ryAction" method="ryAdd">
<result name="result">result.jsp</result>
</action>




result.jsp
<head>
   <script type="text/javascript">
 window.onload = function(){
 // 本页面获得的提示信息
 if(document.getElementById('subhint'))
 {
     var hint = document.getElementById('subhint').innerHTML;
      // 找到父页面
      if(window.parent){
           if(window.parent.reset){
window.parent.reset();
           }
           if(window.parent.document.getElementById('hint')){
                   window.parent.document.getElementById('hint').innerHTML = hint;
           }
      }
  }
};
</script>
</head>

<body>
 <span id="subhint">${requestScope.msg}</span>
</body>


总结
过程就是将父页面表单的提交后的结果页面在子页面打开,这时子页面获得了页面的document的对象。子页面可以调用父页面的全局函数,并返回结果给父页面。现在有了ajax,完全可以替代这种方法。但是上传文件是不能使用ajax的,因为ajax传输的是说白了字符串,怎么可以传文件呢?本文的方法就派上用场了。

本文出自 “IT徐胖子的专栏” 博客,请务必保留此出处http://woshixy.blog.51cto.com/5637578/1018125