天天看點

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傳輸的是說白了字元串,怎麼可以傳檔案呢?本文的方法就派上用場了。

繼續閱讀