且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

巧妙利用iframe,实现和AJAX一样的异步提交表单效果

更新时间:2022-03-27 13:28:12

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


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