用Javascript同时提交多个Web表单的方法


Posted in Javascript onDecember 26, 2009

1问题来自一位网友的提问:
web页面里有多个表单,每个表单对应着某一类数据操作。
比如一个详细的简历信息页面分
1、个人资料
2、工作经验
3、项目经验
4、其他信息 4个表单。
一般的需求是允许用户单独提交其中任何一个表单到下一个页面进行修改操作(也就是说页面有4个不同的修改按钮,点击哪个按钮则只提交某一个表单的数据到服务器,并根据表单的action)。
现在有这样的需求,允许用户选择其中任意的一个或多个表单进行提交修改,这样的话在客户端如何提交表单?
声明:可能会有人说将4个表单合成一个大表单,根据修改按钮的不同在服务器端进行不同的数据操作即可。这是一种解决办法,但考虑到页面数据量比较大,为了提高效率,减少数据传输量,还是希望能够分成多个表单提交,所以这个办法暂不考虑。是不是一定要用js或ajax?如果不用呢?

2 个人观点
1 用Ajax提交,比如prototype
new Ajax.Request("/do1",{parameters:$("form1").serialize().......);

new Ajax.Request("/do2",{parameters:$("form2").serialize().......);

你可以同时调用多个,默认是异步提交,所以可以同时提交多个表单,这个方案是最简单的。

2 使用多个iframe,然后将每个表单的target指向不同的iframe
然后用js的
document.getElementById("form1").submit();
document.getElementById("form2").submit();
。。。
这个样子进行提交。

3 两个方法的对比
Ajax方便简单,对结果的处理也比较省事,框架都替我们做好了,但不能跨域提交
iframe最符合一般的使用,也可以跨域提交,处理返回结果稍微麻烦些,需要在iframe里面使用 parent.进行调用才可以。

Javascript 相关文章推荐
让人期待的2011年度最佳 jQuery 插件分享
Mar 16 Javascript
jquery捕捉回车键及获取checkbox值与异步请求的方法
Dec 24 Javascript
基于Javascript实现二级联动菜单效果
Mar 04 Javascript
Javascript打印局部页面实例
Jun 21 Javascript
基于bootstrap实现广告轮播带图片和文字效果
Jul 22 Javascript
详解微信小程序开发之城市选择器 城市切换
Jan 17 Javascript
Bootstrap table右键功能实现方法
Feb 20 Javascript
JavaScript实现反转字符串的方法详解
Apr 27 Javascript
关于Angularjs中自定义指令一些有价值的细节和技巧小结
Apr 22 Javascript
Vue函数式组件-你值得拥有
May 09 Javascript
Vue 防止短时间内连续点击后多次触发请求的操作
Nov 11 Javascript
Canvas跟随鼠标炫彩小球的实现
Apr 11 Javascript
再谈javascript 动态添加样式规则 W3C校检
Dec 25 #Javascript
javascript 处理事件绑定的一些兼容写法
Dec 24 #Javascript
Javascript 键盘keyCode键码值表
Dec 24 #Javascript
JQuery与iframe交互实现代码
Dec 24 #Javascript
jquery 弹出登录窗口实现代码
Dec 24 #Javascript
Jquery 高亮显示文本中重要的关键字
Dec 24 #Javascript
JQuery 写的个性导航菜单
Dec 24 #Javascript
You might like
PHP微信开发之查询微信精选文章
2016/06/23 PHP
PHP等比例压缩图片的实例代码
2018/07/26 PHP
农历与西历对照
2006/09/06 Javascript
javascript firefox兼容ie的dom方法脚本
2008/05/18 Javascript
js href的用法
2010/05/13 Javascript
基于jquery的3d效果实现代码
2011/03/23 Javascript
jQuery选择器中含有空格的使用示例及注意事项
2013/08/25 Javascript
浅谈javascript中createElement事件
2014/12/05 Javascript
JS简单实现禁止访问某个页面的方法
2016/09/13 Javascript
AngularJS自定义指令实现面包屑功能完整实例
2017/05/17 Javascript
js实现文字列表无缝滚动效果
2017/06/23 Javascript
解决vue2.x中数据渲染以及vuex缓存的问题
2017/07/13 Javascript
vue如何解决循环引用组件报错的问题
2018/09/22 Javascript
学习jQuery中的noConflict()用法
2018/09/28 jQuery
JS写滑稽笑脸运动效果
2020/05/28 Javascript
JavaScript this关键字指向常用情况解析
2020/09/02 Javascript
python中列表和元组的区别
2017/12/18 Python
TENSORFLOW变量作用域(VARIABLE SCOPE)
2020/01/10 Python
Python object类中的特殊方法代码讲解
2020/03/06 Python
jupyter notebook 的工作空间设置操作
2020/04/20 Python
python thrift 实现 单端口多服务的过程
2020/06/08 Python
python suds访问webservice服务实现
2020/06/26 Python
Python趣味实例,实现一个简单的抽奖刮刮卡
2020/07/18 Python
浅析Python 字符编码与文件处理
2020/09/24 Python
Django windows使用Apache实现部署流程解析
2020/10/12 Python
html5中localStorage本地存储的简单使用
2017/06/16 HTML / CSS
Troy-Bilt官网:草坪割草机、吹雪机、分蘖机等
2019/02/19 全球购物
常用UNIX 命令(Linux的常用命令)
2015/12/26 面试题
检察机关个人对照检查材料
2014/09/15 职场文书
全国法制宣传日活动总结2014
2014/11/01 职场文书
2015新生加入学生会自荐书
2015/03/24 职场文书
签证工作证明模板
2015/06/15 职场文书
Python实现列表拼接和去重的三种方式
2021/07/02 Python
Win11安全功能升级:内置防网络钓鱼功能
2022/04/08 数码科技
Windows和Linux上部署Golang并运行程序
2022/04/22 Servers
LyScript实现绕过反调试保护的示例详解
2022/08/14 Python