iframe 表单提交

面对有大量表单需要提交的项目，如果在服务器端进行验证，提交表单时会有一个页面跳转，会让人觉得体验不佳。但如果全部用AJAX提交表单，那么代码量又太大。这个时候我们需要用到下面的技巧。
1、在需要信息交互的页面上放置隐藏的内联框架（加在head里面也可以）

注意框架的name属性，我们将把form表单提交到这个隐藏的iframe中
2、在表单标签上增加target="iframe"，iframe是上面框架的name属性

需要为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 = "";
  echo $data;
}

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中判断接下来的动作。相比传统提交，不需要跳转页面，如果被正则过滤返回操作可以还保留表单内容。
这样不光安全性有所提高，而且用户体验更好，关键是代码量减少了。实际开发过程中用起来是很舒服的一件事情。
这个技巧适用与大部分表单提交情况，赶紧去试试吧。

---

以上内容属于作者原创，特此声明，如需转载，请取得同意