现在是AJAX横行的时代,也许已经很少有人用隐藏form提交来实现不刷新页面更新了。
在AJAX以前,一般都是用隐藏form提交来实现页面不刷新提交数据,虽然那时候我也常用xmlhttp提交来实现,不过现在ajax概念流行,不用一下总好像你跟不上时代似的,老总会问“你用了ajax了没有”。
现在来对比一下ajax与隐藏form提交的利与弊。
1.隐藏form提交,更新数据完成后,需要转到一个空白页面再对原页面进行提交后处理;ajax则不用,可以直接返回原页面进行提交后的处理。可见ajax可以比隐藏form提交少增加一个页面。
2.ajax出于安全性考虑,不能对文件进行操作,所以就不能通过ajax来实现文件上传,而通过隐藏form提交则可以实现这个功能,所以这就是目前用隐藏form提交的主要用途。
现在接下来讲述如何通过隐藏form来实现文件上传
1)首先定义一个用于填写表单内容的form
<form name="form1"></form>
2)接着定义一个用于提交的form
<form name="form2" target="myIframe"> //用于指定提交返回的页面显示在这个隐藏的iframe中
<iframe name="myIframe" style="display:none"></iframe> //用于存放提交返回后的空白页面
<div id="formInner" style="display:none"></div> //用于获取form1的html内容,获得form1的表单元素
</form>
3)在form1提交时,进行如下javascript处理
var formInner= document.getElementById("formInner");
formInner.innerHTML = form1.innerHTML; //复制form1的html代码
form2.action = form1.action;
form2.submit();
4)提交后,进入后台处理,后台处理完成后,需要返回一个空白页面blank.jsp,这个页面是在隐藏的iframe中生成的,所以可以通过parent对象对原页面进行操作。
比如原页面定义了一个updatePageFromSubmit(),则在blank.jsp页面中可以通过parent.updatePageFromSubmit()来调用进行提交返回后 的处理
分享到:
- 2007-04-20 14:06
- 浏览 6428
- 评论(7)
- 论坛回复 / 浏览 (7 / 11055)
- 查看更多
相关推荐
注意:Vue.js版本1的用户请改用。 重大更改:从1.0版开始,此程序包使用受控组件,这意味着该值不再持久... 这个vue.js套件为HTML表单管理提供了一个全面的解决方案,包括演示,验证和(可选)AJAX提交。 该演示基于。
nodejs+express-实现文件上传下载... jquery.form.min.js表单插件,升级表单,实现表单提交回调。 纯css+jQuery实现一键返回顶部。 简单的ajax异步刷新。 项目结构总览: app/:典型的MVC架构,其下包含模型(models
1、提交用户请求 (UA : User Agent) 2、作为HTML 以及 脚本执行的 解释器 3、以图形化的方式显示web页面 2、主要浏览器产品 1、Microsoft Internet Explorer (IE) 2、Mozilla Firefox 3、Google Chrome 4、...
本文开篇第一句话,想引用鲁迅先生《祝福》里的一句话,那便是:“我真傻,真的,我单单知道后端整天都是CRUD,我没想到前端整天都是Form表单”。这句话要从哪里说起呢?大概要从最近半个月的“全栈工程师”说起。...
5. <s:doubleselect list="" doubleName="" doubleList=""></s:doubleselect>-----双下拉框 E: 1. <s:if test=""></s:if> 2. <s:elseif test=""></s:elseif> 3. <s:else></s:else>-----这3个标签一起使用,...
Web Form 窗体 如何实现web页面的提示保存功能 在ASP.Net中两种利用CSS实现多界面的方法 如何在客户端调用服务端代码 页面一postback,它就显示页面的最顶端,怎样让它定位在某一位置? 如何保证页面刷新后的滚动条...
3、HTML 的 form 提交之前如何验证数值文本框的内容全部为数字? 否则的话提示用户并终止提交? 84 4、请写出用于校验HTML文本框中输入的内容全部为数字的javascript代码 84 5、说说你用过那些ajax技术和框架,说说...
3、HTML 的 form 提交之前如何验证数值文本框的内容全部为数字? 否则的话提示用户并终止提交? 84 4、请写出用于校验HTML文本框中输入的内容全部为数字的javascript代码 84 5、说说你用过那些ajax技术和框架,说说...
3、HTML 的 form 提交之前如何验证数值文本框的内容全部为数字? 否则的话提示用户并终止提交? 84 4、请写出用于校验HTML文本框中输入的内容全部为数字的javascript代码 84 5、说说你用过那些ajax技术和框架,说说...
3、HTML 的 form 提交之前如何验证数值文本框的内容全部为数字? 否则的话提示用户并终止提交? 84 4、请写出用于校验HTML文本框中输入的内容全部为数字的javascript代码 84 5、说说你用过那些ajax技术和框架,说说...
3、HTML 的 form 提交之前如何验证数值文本框的内容全部为数字? 否则的话提示用户并终止提交? 84 4、请写出用于校验HTML文本框中输入的内容全部为数字的javascript代码 84 5、说说你用过那些ajax技术和框架,说说...
3、HTML 的 form 提交之前如何验证数值文本框的内容全部为数字? 否则的话提示用户并终止提交? 84 4、请写出用于校验HTML文本框中输入的内容全部为数字的javascript代码 84 5、说说你用过那些ajax技术和框架,说说...
3、HTML 的 form 提交之前如何验证数值文本框的内容全部为数字? 否则的话提示用户并终止提交? 91 4、请写出用于校验HTML文本框中输入的内容全部为数字的javascript代码 92 5、说说你用过那些ajax技术和框架,说说...
3、HTML 的 form 提交之前如何验证数值文本框的内容全部为数字? 否则的话提示用户并终止提交? 84 4、请写出用于校验HTML文本框中输入的内容全部为数字的javascript代码 84 5、说说你用过那些ajax技术和框架,说说...
3、HTML 的 form 提交之前如何验证数值文本框的内容全部为数字? 否则的话提示用户并终止提交? 84 4、请写出用于校验HTML文本框中输入的内容全部为数字的javascript代码 84 5、说说你用过那些ajax技术和框架,说说...
本文开篇第一句话,想引用鲁迅先生《祝福》里的一句话,那便是:“我真傻,真的,我单单知道后端整天都是CRUD,我没想到前端整天都是Form表单”。这句话要从哪里说起呢?大概要从最近半个月的“全栈工程师”说起。...