天空小小岛技术论坛

 找回密码
 注册
搜索
天空小小岛技术论坛 门户 查看主题

使用iFrame模拟Ajax提交

发布者: s.Bo | 发布时间: 2013-11-15 09:55| 查看数: 7577| 评论数: 0|帖子模式

在ajax未出现之前为了实现向服务器端提交数据而不刷新页面的效果,大多数采用的就是这种隐藏iFrame的方法。下面就简要介绍一下这个方法:
1、处理思路:
假设FormA是我们要提交数据的Form,正常来说,向服务端提交数据后,返回的response会刷新当前的Form,也就是页面会刷新一下,但是如果我们将form的target设置到另外一个iframe中,那么刷新的就是target的那个iframe。这种方法其实在一些菜单树的设计上也使用过。同时为了让用户觉察不到iframe的刷新,就需要将这个作为target的iframe隐藏起来。

2、代码实现:
写个代码说明一下:
  1. < form id ="wfAuditForm" method ="post" enctype ="multipart/form-data"  target="hiddenIframe">  
  2. < input type ="file" name ="posterUrlUploadPath" id ="posterUrlUploadPath" class ="fileUpload" title ="上传图片" />  
  3.   
  4. <iframe style="position: absolute, top: -1000px, left: -1000px'" id="hiddenIframe"/>
复制代码


有的时候,我们需要根据返回的数据来更新某些页面元素的值(类似于ajax的success方法),这个时候该怎么办呢?也好办。既然返回的数据都流向了hiddenIframe,那么我们在hiddenIframe中使用一个textarea将这个数据接收下来,在这个iframe中的onload事件中对这些数据进行处理,然后调用父窗口(parent)相应的处理方法来处理。

3、弊端说明:
这种方法的第一个弊端是显而易见的,就是麻烦,所以很多人投向了Ajax的怀抱,另外还有一个弊端是如果返回的数据时Json格式的话,需要将content-type设置为“text/html”而不能设置为json。

4、补充一下:
其实现在这种方法还是在使用中,常见于使用ajax来上传文件,包括ajax的倡导者google,其mail系统还是用这种方法来上传附件,这是因为js的基于安全性的考虑禁止操作文件,导致了不能使用ajax来上传文件。实际上jquery的插件jquery.form.js也是使用的这种方法来实现的文件上传。实现的文件上传。[/code]

最新评论

小黑屋|手机版|Archiver|天空小小岛 ( 京ICP备17043412号-1|

GMT+8, 2018-11-21 12:35 , Processed in 0.100055 second(s), 23 queries , Gzip On.

Powered by Discuz! X3.1

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表