Javascript 同时提交多个Web表单的方法


Posted in Javascript onFebruary 19, 2009

比如一个详细的简历信息页面分 1、个人资料 2、工作经验 3、项目经验 4、其他信息 4个表单。
一般的需求是允许用户单独提交其中任何一个表单到下一个页面进行修改操作(也就是说页面有4个不同的修改按钮,点击哪个按钮则只提交某一个表单的数据到服务器,并根据表单的action)。
现在有这样的需求,允许用户选择其中任意的一个或多个表单进行提交修改,这样的话在客户端如何提交表单?
声明:可能会有人说将4个表单合成一个大表单,根据修改按钮的不同在服务器端进行不同的数据操作即可。这是一种解决办法,但考虑到页面数据量比较大,为了提高效率,减少数据传输量,还是希望能够分成多个表单提交,所以这个办法暂不考虑。
是不是一定要用js或ajax?如果不用呢?

2 个人观点
1 用Ajax提交,比如prototype
new Ajax.Request();
你可以同时调用多个,默认是异步提交,所以可以同时提交多个表单,这个方案是最简单的。
2 使用多个iframe,然后将每个表单的target指向不同的iframe
然后用js的
document.getElementById("form1").submit();
document.getElementById("form2").submit();
。。。
这个样子进行提交。

3 两个方法的对比
Ajax方便简单,对结果的处理也比较省事,框架都替我们做好了,但不能跨域提交
iframe最符合一般的使用,也可以跨域提交,处理返回结果稍微麻烦些,需要在iframe里面使用 parent.进行调用才可以。

Javascript 相关文章推荐
基于JQuery实现滚动到页面底端时自动加载更多信息
Jan 31 Javascript
jquery的ajax跨域请求原理和示例
May 08 Javascript
JavaScript forEach()遍历函数使用及介绍
Jul 08 Javascript
js图片轮播效果实现代码
Apr 18 Javascript
微信小程序开发之实现选项卡(窗口顶部TabBar)页面切换
Nov 25 Javascript
jQuery插件HighCharts绘制的2D堆柱状图效果示例【附demo源码下载】
Mar 14 Javascript
深入理解vue-loader如何使用
Jun 06 Javascript
详解webpack loader和plugin编写
Oct 12 Javascript
vue两组件间值传递 $router.push实现方法
May 15 Javascript
vue 2.5.1 源码学习 之Vue.extend 和 data的合并策略
Jun 04 Javascript
vuecli项目构建SSR服务端渲染的实现
Oct 30 Javascript
vue 自定义组件添加原生事件
Apr 21 Vue.js
javascript function、指针及内置对象
Feb 19 #Javascript
csdn 批量接受好友邀请
Feb 19 #Javascript
判断多个元素(RADIO,CHECKBOX等)是否被选择的原理说明
Feb 18 #Javascript
JAVASCRIPT IE 与 FF中兼容问题小结
Feb 18 #Javascript
javascript css在IE和Firefox中区别分析
Feb 18 #Javascript
js表数据排序 sort table data
Feb 18 #Javascript
js window.event对象详尽解析
Feb 17 #Javascript
You might like
php下通过POST还是GET来传值
2008/06/05 PHP
php zlib压缩和解压缩swf文件的代码
2008/12/30 PHP
PHP容易被忽略而出错陷阱 数字与字符串比较
2011/11/10 PHP
关于PHP的相似度计算函数:levenshtein的使用介绍
2013/04/15 PHP
浅谈php命令行用法
2015/02/04 PHP
php中 ob_start等函数截取标准输出的方法
2015/06/22 PHP
PHP开发的微信现金红包功能示例
2017/06/29 PHP
php生成复杂验证码(倾斜,正弦干扰线,黏贴,旋转)
2018/03/12 PHP
php慢查询日志和错误日志使用详解
2021/02/27 PHP
基于jQuery的input输入框下拉提示层(自动邮箱后缀名)
2012/06/14 Javascript
Jquery index()方法 获取相应元素索引值
2012/10/12 Javascript
理解Javascript闭包
2013/11/01 Javascript
js中传递特殊字符(+,&)的方法
2014/01/16 Javascript
JQuery基础语法小结
2015/02/27 Javascript
jquery实现的动态回到顶部特效代码
2015/10/28 Javascript
Bootstrap中文本框的宽度变窄并且加入一副验证码图片的实现方法
2016/06/23 Javascript
Bootstrap CSS布局之表格
2016/12/17 Javascript
jQuery中select与datalist制作下拉菜单时的区别浅析
2016/12/30 Javascript
jQuery实现页面倒计时并刷新效果
2017/03/13 Javascript
浅谈angularjs依赖服务注入写法的注意点
2017/04/24 Javascript
微信小程序实现张图片合成为一张并下载
2019/07/16 Javascript
Python中实现远程调用(RPC、RMI)简单例子
2014/04/28 Python
Python中操作mysql的pymysql模块详解
2016/09/13 Python
python中defaultdict的用法详解
2017/06/07 Python
使用selenium模拟登录解决滑块验证问题的实现
2019/05/10 Python
python用requests实现http请求代码实例
2019/10/31 Python
pycharm设置当前工作目录的操作(working directory)
2020/02/14 Python
python 基于UDP协议套接字通信的实现
2021/01/22 Python
介绍一下Java的事务处理
2012/12/07 面试题
爸爸的花儿落了教学反思
2014/02/20 职场文书
大学同学会活动方案
2014/08/20 职场文书
高中军训的心得体会
2014/09/01 职场文书
研讨会通知
2015/04/27 职场文书
浅谈Python类的单继承相关知识
2021/05/12 Python
Pandas搭配lambda组合使用详解
2022/01/22 Python
通过feDisplacementMap和feImage实现水波特效
2022/04/24 HTML / CSS