form submit提交遇到的问题
因为公司业务需要,有一个提交的功能,提交的时候要上传文件,后端是用JAVA写的。用的是Form表单手动提交方式,如果用IE后台不到任何数据,firefox是可以的,但是不管是IE还是firefox,后台请求都会打开一个新的空白页面(速度很快时firefox看不出来)。而我想要的功能是提交完后就把当前页面关闭了,而不是打开一个新的空白页面。
下面是html代码,当然经过我修改过的,把出错的情况和正确的都列出来了,submit1和submit2
1 <!DOCTYPE html> 2 <html> 3 <body> 4 <form id="frmChild" enctype="multipart/form-data" onsubmit="return checkForm();"> 5 <input id="txtLocation" name="locationvalue" type="file" size="50"/> 6 <textarea cols="50" rows="5" id="comment" name="comment"></textarea> 7 <input type="submit" name="submit" value="submit1"/> 8 <button type="button" onclick="operator()">submit2</button> 9 </form> 10 </body> 11 </html>
1.IE浏览器提交 获取不到值的情况,即submit2,是在operator()方法中拼URL,然后手动提交,代码如下:
function operator(){ form.method="POST"; form.action="/file/show-file?pid=" + pid + "&wid=" + wid ; form.submit(); }
这种方式iE提交后台取不到值,不知道具体原因是什么,问了一下公司的牛人,说:form表单存在上传文件的提交过程,会自动提交一些与表单相关的数据,比如表单头什么的,手动提交的话会出现不可预知的错误,更别提IE6了,最好的方法是在表单中submit直接自动提交。
2.解决1的问题,既用submit1的方式。首先在form标签中写清楚method等信息,如:<form action="/file/submit-file" method="post" id="frmChild" enctype="multipart/form-data" onsubmit="return checkForm();">
把要传的数据用<input type="hidden">隐藏在页面中,后台就可以一起获得数据了,不需要自己拼URL,在<form>中用onsubmit="return checkForm();"的原因是在提交之前要对表单数据进行一个验证,必须return一个值(true/false),如果返回的是false,表单就不提交了,如果return的是true,则表单继续自动提交。
3.需要注意的点:
(1).上传文件在表单中必须写明enctype="multipart/form-data",默认是"application/x-www-form-urlencoded"(没有上传文件时用),这是表单的MIME编码。有上传文件时不能用ajax请求提交数据
(2).表单提交到一个URL,默认会打开URL这个页面,不过不想打开这个页面的话,自动提交可能实现不了,为解决问题,可以在后端让页面跳转到一个想要的页面