用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的Polymer框架中的事件绑定
Jul 29 Javascript
jQuery Real Person验证码插件防止表单自动提交
Nov 06 Javascript
Javascript闭包实例详解
Nov 29 Javascript
Angular ng-repeat 对象和数组遍历实例
Sep 14 Javascript
BootStrap入门教程(三)之响应式原理
Sep 19 Javascript
javascript实现秒表计时器的制作方法
Feb 16 Javascript
vue.js开发环境安装教程
Mar 17 Javascript
前端自动化开发之Node.js的环境搭建教程
Apr 01 Javascript
vue cli使用绝对路径引用图片问题的解决
Dec 06 Javascript
使用webpack编译es6代码的方法步骤
Apr 28 Javascript
JS实现简单省市二级联动
Nov 27 Javascript
10分钟学会js处理json的常用方法
Dec 06 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
PHPlet在Windows下的安装
2006/10/09 PHP
PHP原生模板引擎 最简单的模板引擎
2012/04/25 PHP
WordPress中查询文章的循环Loop结构及用法分析
2015/12/17 PHP
分享php多功能图片处理类
2016/05/15 PHP
PHP使用PDO抽象层获取查询结果的方法示例
2018/05/10 PHP
PHP强制转化的形式整理
2020/05/22 PHP
js优化针对IE6.0起作用(详细整理)
2012/12/25 Javascript
利用jquery动画特效和css打造的侧边弹出垂直导航
2014/04/04 Javascript
用JavaScript实现用一个DIV来包装文本元素节点
2014/09/09 Javascript
js使用心得分享
2015/01/13 Javascript
Bootstrap优化站点资源、响应式图片、传送带使用详解3
2016/10/14 Javascript
JS实现图片高斯模糊切换效果的焦点图实例
2017/01/21 Javascript
微信运维交互机器人的示例代码
2018/11/12 Javascript
Vue中使用canvas方法总结
2019/02/12 Javascript
react-router-dom 嵌套路由的实现
2020/05/02 Javascript
python中引用与复制用法实例分析
2015/06/04 Python
详解python单例模式与metaclass
2016/01/15 Python
Python如何读取MySQL数据库表数据
2017/03/11 Python
Python进程间通信之共享内存详解
2017/10/30 Python
python 生成图形验证码的方法示例
2018/11/11 Python
详解python 模拟豆瓣登录(豆瓣6.0)
2019/04/18 Python
Python使用微信itchat接口实现查看自己微信的信息功能详解
2019/08/22 Python
TensorFlow tensor的拼接实例
2020/01/19 Python
Python读取表格类型文件代码实例
2020/02/17 Python
Python+Dlib+Opencv实现人脸采集并表情判别功能的代码
2020/07/01 Python
html5 Canvas画图教程(11)—使用lineTo/arc/bezierCurveTo画椭圆形
2013/01/09 HTML / CSS
Yahoo-PHP面试题3
2012/01/14 面试题
职业教育毕业生求职信
2013/11/09 职场文书
工厂门卫岗位职责
2013/11/25 职场文书
领导干部四风问题自我剖析材料
2014/09/25 职场文书
党的群众路线教育实践活动领导班子整改方案
2014/10/25 职场文书
大学生社会实践活动总结报告
2015/05/06 职场文书
同意离婚答辩状
2015/05/22 职场文书
会议室使用管理制度
2015/08/06 职场文书
导游词之山东红叶谷
2019/10/31 职场文书
Python编写车票订购系统 Python实现快递收费系统
2022/08/14 Python