巧妙利用 iframe，實現和 Ajax 一樣的非同步提交表單效果

fourn發表於2019-06-14
非同步

面對有大量表單需要提交的專案，如果在伺服器端進行驗證，提交表單時會有一個頁面跳轉，返回路徑太長會讓人覺得體驗不佳。但如果全部用AJAX提交表單，那麼程式碼量又太大。這個時候我們需要用到下面的技巧。

1、在需要資訊互動的頁面上放置隱藏的內聯框架（加在head裡面也可以）

<iframe name="iframe" style="display:none;"></iframe>

注意框架的name屬性，我們將把form表單提交到這個隱藏的iframe中

2、在表單標籤上增加target="iframe"，iframe是上面框架的name屬性

<form action="some_action_url" method="post" target="iframe">

需要為form表單設定target屬性，屬性值就是步驟1中iframe的名稱

3、伺服器按照需求呼叫如下方法

/**
* 表單非ajax非同步提交回撥方法
* @param unknown $msg
* @param string $url on重新整理頁面 off不做任何操作（預設） url跳轉到指定url
* @param string $time
*/
function iframe($msg, $url='', $time='2000'){
  $data = "<script type=\"text/javascript\">parent.iframe('{$msg}','{$url}',{$time});</script>";
  echo $data;
}

$msg 為提示文字，$url 為跳轉的頁面（如果不填寫預設為重新整理當前頁面，off為不重新整理頁面），$time 為提示持續的時間。
接收表單的介面在處理完各種邏輯之後（也可能是驗證失敗之後），呼叫此方法。此方法會向頁面上隱藏的iframe域中輸出一個javascript方法，這個方法呼叫了父框架（也就是表單所在頁面）的iframe方法。

4、父框架必須包含jquery和layer包，再將ifrmae方法放到頁面上

function iframe(_msg, _url, _time){
  layer.msg(_msg, {time:_time}, function(){
    if(_url == 'on'){
    location.reload(true);
    //此處應為頁面提交了表單所以只能全重新整理，否則瀏覽器會提示是否重新post
  }else if(_url == 'off'){
    //不重新整理
  }else{
    location.href = _url;
  }
  });
}

此方法會彈出相應的處理結果，以及根據情況對頁面進行重新整理或者跳轉。

1、3、4步驟的內容和方法都可以放到各自的公共檔案中，使用的時候只需要修改form標籤，程式處理業務，最後呼叫iframe方法，這樣就能不用AJAX也實現和它一樣的非同步提交效果了。

相比AJAX，不需要JS用選擇器去獲取資料，不用寫前端驗證程式碼，都交給後端來處理，不用在伺服器端echo奇怪的錯誤程式碼又回到AJAX中判斷接下來的動作。相比傳統提交，不需要跳轉頁面，如果被正則過濾返回操作可以還保留表單內容。

這樣不光安全性有所提高，而且使用者體驗更好，關鍵是程式碼量減少了。實際開發過程中用起來是很舒服的一件事情。
這個技巧適用與大部分表單提交情況。

相關文章