用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 相关文章推荐
javascript div 弹出可拖动窗口
Feb 26 Javascript
用js做一个小游戏平台 (一)
Dec 29 Javascript
js判断iframe内的网页是否滚动到底部触发事件
Mar 18 Javascript
javascript中Array数组的迭代方法实例分析
Feb 04 Javascript
JavaScript必知必会(三) String .的方法来自何方
Jun 08 Javascript
Vue表单验证插件的制作过程
Apr 01 Javascript
微信小程序教程系列之设置标题栏和导航栏(7)
Jun 29 Javascript
微信小程序的分类页面制作
Jun 27 Javascript
node.js中grunt和gulp的区别详解
Jul 17 Javascript
纯js实现的积木(div层)拖动功能示例
Jul 19 Javascript
Vue组件之高德地图地址选择功能的实例代码
Jun 21 Javascript
详解JS预解析原理
Jun 16 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
追忆往昔!浅谈收音机的百年发展历史
2021/03/01 无线电
PHP的开合式多级菜单程序
2006/10/09 PHP
一步一步学习PHP(7) php 字符串相关应用
2010/03/05 PHP
PHP+Mysql+jQuery文件下载次数统计实例讲解
2015/10/10 PHP
PHP缓冲区用法总结
2016/02/14 PHP
php解决安全问题的方法实例
2019/09/19 PHP
Array对象方法参考
2006/10/03 Javascript
EXT中xtype的含义分析
2010/01/07 Javascript
关于JAVASCRIPT urldecode URL解码的问题
2012/01/08 Javascript
用Javascript实现Windows任务管理器的代码
2012/03/27 Javascript
jquery动态添加删除div 具体实现
2013/07/20 Javascript
js实现遮罩层划出效果是生成div而不是显示
2014/07/29 Javascript
JavaScript中string转换成number介绍
2014/12/31 Javascript
Ionic学习日记实现验证码倒计时
2018/02/08 Javascript
vuex分模块后,实现获取state的值
2020/07/26 Javascript
JavaScript 实现拖拽效果组件功能(兼容移动端)
2020/11/11 Javascript
js观察者模式的弹幕案例
2020/11/23 Javascript
[00:35]DOTA2上海特级锦标赛 VP战队宣传片
2016/03/04 DOTA
[46:49]完美世界DOTA2联赛PWL S3 access vs Rebirth 第二场 12.19
2020/12/24 DOTA
opencv python 傅里叶变换的使用
2018/07/21 Python
Django 大文件下载实现过程解析
2019/08/01 Python
PyQt Qt Designer工具的布局管理详解
2019/08/07 Python
python加载自定义词典实例
2019/12/06 Python
使用python处理题库表格并转化为word形式的实现
2020/04/14 Python
Django 解决model 反向引用中的related_name问题
2020/05/19 Python
PythonPC客户端自动化实现原理(pywinauto)
2020/05/28 Python
基于selenium及python实现下拉选项定位select
2020/07/22 Python
利用CSS3实现炫酷的飞机起飞动画
2016/09/17 HTML / CSS
全球速卖通巴西站点:Aliexpress巴西
2016/08/24 全球购物
如何用PHP实现邮件发送
2012/12/26 面试题
优秀大学生的自我评价
2014/01/16 职场文书
2014院党委领导班子及其成员群众路线对照检查材料思想汇报
2014/10/04 职场文书
聊聊Lombok中的@Builder注解使用教程
2021/11/17 Java/Android
如何避免mysql启动时错误及sock文件作用分析
2022/01/22 MySQL
分布式架构Redis中有哪些数据结构及底层实现原理
2022/03/13 Redis
SpringCloud Function SpEL注入漏洞分析及环境搭建
2022/04/08 Java/Android