用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 函数速查表
Feb 07 Javascript
JavaScript Accessor实现说明
Dec 06 Javascript
javascript处理表单示例(javascript提交表单)
Apr 28 Javascript
node.js中的fs.ftruncate方法使用说明
Dec 15 Javascript
浅谈jQuery事件绑定原理
Jan 02 Javascript
C++中的string类的用法小结
Aug 07 Javascript
微信小程序  action-sheet详解及实例代码
Nov 09 Javascript
js/jq仿window文件夹框选操作插件
Mar 08 Javascript
为你的微信小程序体积瘦身详解
May 20 Javascript
解决vue-cli项目打包出现空白页和路径错误的问题
Sep 04 Javascript
微信小程序wx.request拦截器使用详解
Jul 09 Javascript
layui树形菜单动态遍历的例子
Sep 23 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验证邮箱和ip地址最简单方法汇总
2015/10/30 PHP
Thinkphp5行为使用方法汇总
2017/12/21 PHP
javascript dom 操作详解 js加强
2009/07/13 Javascript
JavaScript 事件记录使用说明
2009/10/20 Javascript
JS window.opener返回父页面的应用
2009/10/24 Javascript
javascript+mapbar实现地图定位
2010/04/09 Javascript
基于jQuery的淡入淡出可自动切换的幻灯插件
2010/08/24 Javascript
jQuery的链式调用浅析
2010/12/03 Javascript
JavaScript网页定位详解
2014/01/13 Javascript
javaScript使用EL表达式的几种方式
2014/05/27 Javascript
Javascript动态创建表格及删除行列的方法
2015/05/15 Javascript
asp知识整理笔记3(问答模式)
2015/09/27 Javascript
javascript制作照片墙及制作过程中出现的问题
2016/04/04 Javascript
浅谈JS中String()与 .toString()的区别
2016/10/20 Javascript
浅谈Angular.js中使用$watch监听模型变化
2017/01/10 Javascript
JavaScript中Object值合并方法详解
2017/12/22 Javascript
mpvue写一个CPASS小程序的示例
2018/09/04 Javascript
如何实现双向绑定mvvm的原理实现
2019/05/28 Javascript
js实现拖动缓动效果
2020/01/13 Javascript
[00:30]塑造者的传承礼包-戴泽“暗影之焰”套装展示视频
2014/04/04 DOTA
pyramid配置session的方法教程
2013/11/27 Python
Python中SOAP项目的介绍及其在web开发中的应用
2015/04/14 Python
利用Python实现简单的相似图片搜索的教程
2015/04/23 Python
python创建一个最简单http webserver服务器的方法
2015/05/08 Python
python中通过预先编译正则表达式提高效率
2017/09/25 Python
python3 自动识别usb连接状态,即对usb重连的判断方法
2019/07/03 Python
django框架中间件原理与用法详解
2019/12/10 Python
python3实现往mysql中插入datetime类型的数据
2020/03/02 Python
sort命令的作用和用法
2013/08/25 面试题
高级护理专业大学生求职信
2013/10/24 职场文书
职业生涯规划书的格式
2013/12/29 职场文书
2014年残联工作总结
2014/11/21 职场文书
试用期旷工辞退通知书
2015/04/17 职场文书
2019升学宴主持词范本5篇
2019/10/09 职场文书
2020年元旦晚会策划书模板
2019/12/30 职场文书
Windows server 2012 配置Telnet以及用法详解
2022/04/28 Servers