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

简介: 面对有大量表单需要提交的项目,如果在服务器端进行验证,提交表单时会有一个页面跳转,会让人觉得体验不佳。但如果全部用AJAX提交表单,那么代码量又太大。这个时候我们需要用到下面的技巧。

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


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

目录
相关文章
|
1月前
|
前端开发 JavaScript Java
使用Ajax进行异步交互:提升Java Web应用的用户体验
【4月更文挑战第3天】Ajax技术在Web开发中提升UX,通过与服务器异步交互实现页面局部更新,无需完整刷新。核心组件包括XMLHttpRequest、JavaScript、HTML/CSS及服务器端脚本。在Java Web应用中,可使用原生JavaScript或框架如jQuery、AngularJS实现Ajax请求。Ajax减少页面刷新,实现实时数据更新,即时表单验证和动态UI,显著改善用户体验,是现代Web开发不可或缺的一部分。
|
4月前
|
前端开发 JavaScript API
Ajax技术的秘密揭秘:异步传输,高效交互
Ajax技术的秘密揭秘:异步传输,高效交互
|
11天前
|
XML JSON 前端开发
学习Ajax使用异步对象发送请求
Ajax,全称Asynchronous JavaScript and XML(异步JavaScript和XML),是一种用于创建更好、更快以及交互性更强的Web应用程序的技术。
19 3
|
4月前
|
JSON 前端开发 JavaScript
探秘 AJAX:让网页变得更智能的异步技术(下)
探秘 AJAX:让网页变得更智能的异步技术(下)
探秘 AJAX:让网页变得更智能的异步技术(下)
|
4月前
|
XML 前端开发 JavaScript
探秘 AJAX:让网页变得更智能的异步技术(上)
探秘 AJAX:让网页变得更智能的异步技术(上)
探秘 AJAX:让网页变得更智能的异步技术(上)
|
7月前
|
存储 前端开发 JavaScript
HTTP进阶,Cookie,响应的回报结果含义,ajax,form表单,不同状态码代表的结果
HTTP进阶,Cookie,响应的回报结果含义,ajax,form表单,不同状态码代表的结果
HTTP进阶,Cookie,响应的回报结果含义,ajax,form表单,不同状态码代表的结果
|
10月前
|
XML 前端开发 JavaScript
ajax 异步
Ajax(异步JavaScript和XML)是一种用于创建优雅的、可交互的Web内容的技术。它使用XMLHttpRequest对象作为后台与服务器端通信的桥梁,并使用JavaScript处理和展示从服务器端返回的数据。 Ajax可以使用户界面更加实时和响应迅速,因为它只需要通过JavaScript处理和展示从服务器端返回的部分数据,而无需重新加载整个页面。这也意味着,用户可以在不必等待整个页面重新加载的情况下,就可以获取和操作服务器端的数据。 Ajax的工作原理是,当用户触发某个操作时,JavaScript代码会向服务器发送一个HTTP请求,并在服务器端返回响应后,使用JavaScript处理
39 0
|
10月前
|
前端开发 JavaScript 关系型数据库
宝塔设置PHP定时任务实战记录(定时任务、ajax异步刷新API、shell脚本、访问url)
宝塔设置PHP定时任务实战记录(定时任务、ajax异步刷新API、shell脚本、访问url)
499 0
|
10月前
|
前端开发 数据可视化
Echarts实战案例代码(14):数据可视化大屏根据ajax异步更新筛选条件查询互动展示的解决思路
Echarts实战案例代码(14):数据可视化大屏根据ajax异步更新筛选条件查询互动展示的解决思路
86 0
|
11月前
|
JavaScript 前端开发
Form表单利用Jquery Validate验证以及ajax提交
Form表单利用Jquery Validate验证以及ajax提交
50 0