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


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

目录
相关文章
|
8月前
|
前端开发 JavaScript Java
使用Ajax进行异步交互:提升Java Web应用的用户体验
【4月更文挑战第3天】Ajax技术在Web开发中提升UX,通过与服务器异步交互实现页面局部更新,无需完整刷新。核心组件包括XMLHttpRequest、JavaScript、HTML/CSS及服务器端脚本。在Java Web应用中,可使用原生JavaScript或框架如jQuery、AngularJS实现Ajax请求。Ajax减少页面刷新,实现实时数据更新,即时表单验证和动态UI,显著改善用户体验,是现代Web开发不可或缺的一部分。
104 0
|
8月前
|
前端开发 JavaScript API
Ajax技术的秘密揭秘:异步传输,高效交互
Ajax技术的秘密揭秘:异步传输,高效交互
|
4月前
|
XML 前端开发 JavaScript
php中Ajax的简单使用,登录表单调用Ajax判断是否正确登录利用layer.msg进行提示
本文介绍了在PHP中如何使用Ajax进行登录表单的数据提交,并利用jQuery的$.post()方法与后端通信,以及使用layer.msg进行前端提示。
php中Ajax的简单使用,登录表单调用Ajax判断是否正确登录利用layer.msg进行提示
|
5月前
|
前端开发 JavaScript Java
Ajax进行异步交互:提升Java Web应用的用户体验
Ajax 技术允许在不重载整个页面的情况下与服务器异步交换数据,通过局部更新页面内容,极大提升了 Java Web 应用的响应速度和用户体验。本文介绍 Ajax 的基本原理及其实现方式,包括使用 XMLHttpRequest 对象发送请求、处理响应数据,并在 Java Web 应用中集成 Ajax。此外,还探讨了 Ajax 如何通过减少页面刷新、实时数据更新等功能改善用户体验。
89 3
|
5月前
|
前端开发 JavaScript Java
SpringBoot+JQuery+Ajax实现表单数据传输和单文件或多文件的上传
关于如何在SpringBoot项目中结合JQuery和Ajax实现表单数据的传输以及单文件或多文件上传的教程。文章提供了完整的前后端示例代码,包括项目的`pom.xml`依赖配置、SpringBoot的启动类`App.java`、静态资源配置`ResourceConfig.java`、配置文件`application.yml`、前端HTML页面(单文件上传和多文件上传加表单内容)以及后端控制器`UserController.java`。文章最后展示了运行结果的截图。
343 0
SpringBoot+JQuery+Ajax实现表单数据传输和单文件或多文件的上传
|
7月前
|
XML 移动开发 前端开发
JS设置Ajax为同步或异步
JS设置Ajax为同步或异步
106 0
|
8月前
|
XML JSON 前端开发
学习Ajax使用异步对象发送请求
Ajax,全称Asynchronous JavaScript and XML(异步JavaScript和XML),是一种用于创建更好、更快以及交互性更强的Web应用程序的技术。
85 3
|
7月前
1.ajax同步和异步区别 2.post和get区别
1.ajax同步和异步区别 2.post和get区别
40 0
|
8月前
|
JSON 前端开发 JavaScript
探秘 AJAX:让网页变得更智能的异步技术(下)
探秘 AJAX:让网页变得更智能的异步技术(下)
探秘 AJAX:让网页变得更智能的异步技术(下)
|
8月前
|
XML 前端开发 JavaScript
探秘 AJAX:让网页变得更智能的异步技术(上)
探秘 AJAX:让网页变得更智能的异步技术(上)
探秘 AJAX:让网页变得更智能的异步技术(上)