提交两个form表单
2016-05-05 17:19
281 查看
最近,自己做项目遇到这样一个问题就是在维护项目的时,需要增加新的表单,而在增加新的表单的同时只有一个提交按钮 这就意味着一个按钮要同时提交两个form表单。这个,以前都没有遇到过,于是找google,有两种解决方案(不过没有示例):
1.通过iframe
先让第一个表单提交到该iframe,把第一个表单的target指向iframe的name。再在iframe中通过JavaScript提交第二个表单
2.利用ajax
这个其实很容易理解,即通过form1的特有的onsubmit()提交事件(也可以用onclick()),在js里写ajax把form2通过ajax异步请求到服务器,提交form2,完成两个form的提交。(jsp页面中只有一个提交按钮一个form表单,即form1,而form2不用写在jsp中)
下面讲一下第二种方式提交表单(struts1):
function sureSave(){
var url = 'paramSetup.do?operate=updateParamSetup';
if(window.XMLHttpRequest) {
req = new XMLHttpRequest();
} else if (window.ActiveXObject) {
req = new ActiveXObject("Microsoft.XMLHTTP");
}
req.open("GET", url, true);
req.onreadystatechange = callback;
req.send(null);
alert('保存成功!');
location.reload();
}
function callback() {
if(req.readyState == 4) {
if(req.status == 200) {
var msg = req.responseXML;
//alert(msg);
}
}
}
}
<form name="form1" action="portConfig.do?operate=updateParamSetup2" method="post"
onsubmit="return sureSave()">
...
<input name="submit" type="submit" value="保存"/>
</form>
这其中有一个小问题,不指定大家有没有发现。就是两个表单是form1开始提交,form2因为是ajax的异步提交,所以会花费一点时间,结果是边提交页面边刷新(location.reload();),提交form2的时候提交和刷新相互交错,最后提交刷新后的网页是没有完全刷新的,这不是我们想要的结果。于是,我想到Java的线程,在form2所对应的anction的显示网页的那个方法中添加:(大家有更好的方法也可以提出交流)
try {
Thread.sleep ( 50 ) ;
} catch (InterruptedException ie){
ie.printStackTrace();
}
也就是说ajax异步访问服务器到返回信息浏览器的时间只要50微秒(因机而异),从中可以看出ajax的速度还是挺快的。
1.通过iframe
先让第一个表单提交到该iframe,把第一个表单的target指向iframe的name。再在iframe中通过JavaScript提交第二个表单
2.利用ajax
这个其实很容易理解,即通过form1的特有的onsubmit()提交事件(也可以用onclick()),在js里写ajax把form2通过ajax异步请求到服务器,提交form2,完成两个form的提交。(jsp页面中只有一个提交按钮一个form表单,即form1,而form2不用写在jsp中)
下面讲一下第二种方式提交表单(struts1):
function sureSave(){
var url = 'paramSetup.do?operate=updateParamSetup';
if(window.XMLHttpRequest) {
req = new XMLHttpRequest();
} else if (window.ActiveXObject) {
req = new ActiveXObject("Microsoft.XMLHTTP");
}
req.open("GET", url, true);
req.onreadystatechange = callback;
req.send(null);
alert('保存成功!');
location.reload();
}
function callback() {
if(req.readyState == 4) {
if(req.status == 200) {
var msg = req.responseXML;
//alert(msg);
}
}
}
}
<form name="form1" action="portConfig.do?operate=updateParamSetup2" method="post"
onsubmit="return sureSave()">
...
<input name="submit" type="submit" value="保存"/>
</form>
这其中有一个小问题,不指定大家有没有发现。就是两个表单是form1开始提交,form2因为是ajax的异步提交,所以会花费一点时间,结果是边提交页面边刷新(location.reload();),提交form2的时候提交和刷新相互交错,最后提交刷新后的网页是没有完全刷新的,这不是我们想要的结果。于是,我想到Java的线程,在form2所对应的anction的显示网页的那个方法中添加:(大家有更好的方法也可以提出交流)
try {
Thread.sleep ( 50 ) ;
} catch (InterruptedException ie){
ie.printStackTrace();
}
也就是说ajax异步访问服务器到返回信息浏览器的时间只要50微秒(因机而异),从中可以看出ajax的速度还是挺快的。
相关文章推荐
- 线段的类
- Moqui学习之数据与资源
- iOS的枚举
- kudu编译及自定义版本升级
- Oracle表空间查看sql使用情况
- 面试宝典
- 【特效】弹窗效果(多个页面可统一调用,带遮罩背景)
- 巧用正则表达式
- Android自定义View解析之视图状态及视图重绘(二)
- 程序员必须知道的几个Git代码托管平台
- iOS中atomic 与 nonatomic,assign,copy与retain的定义和区别
- 【Arduino官方教程第一辑】示例程序 3-1 模拟信号与串口
- Android4.0 Message 中添加附件
- c++课的圆周面积
- 关系型数据库设计范式
- SIM结构模型(Logical model of SIM)
- 天兔(Lepus)数据库监控系统快速安装部署 推荐
- 原版系统装不了
- 脚本 - 清理/维护gpperfmon历史数据
- socket编程小问题:地址已经被使用——Address already in use