用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 相关文章推荐
jquery 简短右键菜单 多浏览器兼容
Jan 01 Javascript
关于this和self的使用说明
Aug 01 Javascript
js常用排序实现代码
Dec 28 Javascript
JQuery实现table行折叠效果以JSON做数据源
May 26 Javascript
深入理解JavaScript系列(19):求值策略(Evaluation strategy)详解
Mar 05 Javascript
jquery实现经典的淡入淡出选项卡效果代码
Sep 22 Javascript
jQGrid动态填充select下拉框的选项值(动态填充)
Nov 28 Javascript
jsTree使用记录实例
Dec 01 Javascript
学好js,这些js函数概念一定要知道【推荐】
Jan 19 Javascript
实例详解Vue项目使用eslint + prettier规范代码风格
Aug 20 Javascript
如何优雅的在一台vps(云主机)上面部署vue+mongodb+express项目
Jan 20 Javascript
在layui中layer弹出层点击事件无效的解决方法
Sep 05 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 flv视频时间获取函数
2010/06/29 PHP
PHP下利用shell后台运行PHP脚本,并获取该脚本的Process ID的代码
2011/09/19 PHP
ThinkPHP框架实现session跨域问题的解决方法
2014/07/01 PHP
php判断IP地址是否在多个IP段内
2020/08/18 PHP
javascript判断单选框或复选框是否选中方法集锦
2007/04/04 Javascript
JavaScript Date对象使用总结
2009/05/14 Javascript
JavaScript中获取元素索引的函数
2010/09/10 Javascript
div+css+js实现无缝滚动类似marquee无缝滚动兼容firefox
2013/08/29 Javascript
innerHTML在IE中报错解决方案
2014/12/15 Javascript
分享十五款 jQuery 社交网络分享插件
2015/05/16 Javascript
基于JavaScript实现表单密码的隐藏和显示出来
2016/03/02 Javascript
Nodejs下DNS缓存问题浅析
2016/11/16 NodeJs
AngularJS的脏检查深入分析
2017/04/22 Javascript
JS解决IOS中拍照图片预览旋转90度BUG的问题
2017/09/13 Javascript
layer插件select选中默认值的方法
2018/08/14 Javascript
layui点击导航栏刷新tab页的示例代码
2018/08/14 Javascript
Javascript实现动态时钟效果
2018/11/17 Javascript
Vue+ElementUI项目使用webpack输出MPA的方法
2019/08/27 Javascript
详解elementUI中input框无法输入的问题
2020/04/27 Javascript
JavaScript语句错误throw、try及catch实例解析
2020/08/18 Javascript
Python中的字典遍历备忘
2015/01/17 Python
Python使用面向对象方式创建线程实现12306售票系统
2015/12/24 Python
Python网页正文转换语音文件的操作方法
2018/12/09 Python
python科学计算之narray对象用法
2019/11/25 Python
python集合删除多种方法详解
2020/02/10 Python
python 如何区分return和yield
2020/09/22 Python
CSS3 二级导航菜单的制作的示例
2018/04/02 HTML / CSS
有模特经验的简历自我评价
2013/09/19 职场文书
应聘教师推荐信
2013/10/31 职场文书
群众路线批评与自我批评
2014/02/06 职场文书
小学教师寄语大全
2014/04/03 职场文书
倡议书格式范文
2014/04/14 职场文书
学生会副主席竞选稿
2015/11/19 职场文书
初任公务员培训心得体会
2016/01/08 职场文书
交通事故协议书范本
2016/03/19 职场文书
MySQL 中如何归档数据的实现方法
2022/03/16 SQL Server