用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脚本实现Web页面信息交互
Oct 11 Javascript
用Javascript实现Sleep暂停功能代码
Sep 03 Javascript
Jquery图形报表插件 jqplot简介及参数详解
Oct 10 Javascript
jquery实现按Enter键触发事件示例
Sep 10 Javascript
javascript实现页面刷新时自动清空表单并选中的方法
Jul 18 Javascript
浅谈js中用$(#ID)来作为选择器的问题(id重复的时候)
Feb 14 Javascript
基于JavaScript实现飘落星星特效
Aug 10 Javascript
iview实现select tree树形下拉框的示例代码
Dec 21 Javascript
Vue中的组件及路由使用实例代码详解
May 22 Javascript
JS实现利用闭包判断Dom元素和滚动条的方向示例
Aug 26 Javascript
使用preload预加载页面资源时注意事项
Feb 03 Javascript
基于vue与element实现创建试卷相关功能(实例代码)
Dec 07 Vue.js
再谈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
DC动画电影《黑暗正义联盟》曝预告 5月5日上线数字平台
2020/04/09 欧美动漫
PHP获取youku视频真实flv文件地址的方法
2014/12/23 PHP
CodeIgniter整合Smarty的方法详解
2017/08/25 PHP
非常有用的40款jQuery 插件推荐(系列二)
2011/12/25 Javascript
关于jQuery中.attr()和.prop()的问题探讨
2013/09/06 Javascript
详解JavaScript的while循环的使用
2015/06/03 Javascript
JavaScript Ajax编程 应用篇
2016/07/02 Javascript
jQuery 操作input中radio的技巧
2016/07/18 Javascript
jQuery Form表单取值的方法
2017/01/11 Javascript
jQuery中的deferred使用方法
2017/03/27 jQuery
解决百度Echarts图表坐标轴越界的方法
2018/10/17 Javascript
vue-router实现嵌套路由的讲解
2019/01/19 Javascript
在Vue项目中使用jsencrypt.js对数据进行加密传输的方法
2019/04/17 Javascript
如何解决js函数防抖、节流出现的问题
2019/06/17 Javascript
在vue+element ui框架里实现lodash的debounce防抖
2019/11/13 Javascript
Python 深入理解yield
2008/09/06 Python
python django事务transaction源码分析详解
2017/03/17 Python
python 计算两个日期相差多少个月实例代码
2017/05/24 Python
python 多线程将大文件分开下载后在合并的实例
2018/11/09 Python
Python Django 简单分页的实现代码解析
2019/08/21 Python
python子线程退出及线程退出控制的代码
2019/10/16 Python
python 统计文件中的字符串数目示例
2019/12/24 Python
Python使用Tkinter实现滚动抽奖器效果
2020/01/06 Python
Python-for循环的内部机制
2020/06/12 Python
python爬虫泛滥的解决方法详解
2020/11/25 Python
python实现登录与注册系统
2020/11/30 Python
我能否用void** 指针作为参数, 使函数按引用接受一般指针
2013/02/16 面试题
财务工作个人求职的自我评价
2013/12/19 职场文书
挂牌仪式策划方案
2014/05/18 职场文书
售后服务承诺函格式
2015/01/21 职场文书
领导欢迎词致辞
2015/01/23 职场文书
辞职信如何写
2015/02/27 职场文书
如何用JS实现网页瀑布流布局
2021/04/24 Javascript
Python基础之pandas数据合并
2021/04/27 Python
微软Win11什么功能最惊艳? Windows11新功能特性汇总
2021/11/21 数码科技
windows server 2016 域环境搭建的方法步骤(图文)
2022/06/25 Servers