天天看点

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" id="txtid"></td>

  </tr>

   <td>姓名</td>

   <td><input type="text" name="txtname" id="txtname"></td>

   <td colspan="2"><input type="submit" value="提交"></td>

   <td><span id="hint"></span></td>

 </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;

       }

   }

 };

</head>

<body>

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

</body>

总结

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

继续阅读