阅读82 返回首页    go 技术社区[云栖]

ajax效果模拟——隐藏的iframe无刷新效果


在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" ></td>
  </tr>
  <tr>
   <td>姓名</td>
   <td><input type="text" name="txtName" ></td>
  </tr>
  <tr>
   <td colspan="2"><input type="submit" value="提交"></td>
  </tr>
  <tr>
   <td><span ></span></td>
  </tr>
 </table>
</form>
<iframe name="frame" ></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" 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 >${requestScope.msg}</span>
</body>

 

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

 

 

最后更新：2017-04-03 20:19:44

  上一篇：go oracle中的dual详解
  下一篇：go jQuery中的$.extend方法来扩展JSON对象