日期:2014-05-16 浏览次数:20598 次
几年之前,那个时候Ajax还没有出现(或者说还没有像现在这么火),为了实现向服务器端提交数据而不刷新页面的效果,大多数采用的就是这种隐藏iFrame的方法。下面就简要介绍一下这个方法:
?
1、处理思路:
假设FormA是我们要提交数据的Form,正常来说,向服务端提交数据后,返回的response会刷新当前的Form,也就是页面会刷新一下,但是如果我们将form的target设置到另外一个iframe中,那么刷新的就是target的那个iframe。这种方法其实在一些菜单树的设计上也使用过。同时为了让用户觉察不到iframe的刷新,就需要将这个作为target的iframe隐藏起来。
?
2、代码实现:
写个代码说明一下:
< form id ="wfAuditForm" method ="post" enctype ="multipart/form-data" target="hiddenIframe"> < input type ="file" name ="posterUrlUploadPath" id ="posterUrlUploadPath" class ="fileUpload" title ="上传图片" /> <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也是使用的这种方法来实现的文件上传。
?
互联网码农一枚,欢迎微博互粉:http://weibo.com/icemanhit