1.无刷新页面提交表单
表单可实现无刷新页面提交,无需页面跳转,如下,通过一个隐藏的iframe实现,form表单的target设置为iframe的name名称,form提交目标位当前页面iframe则不会刷新页面
<formaction="/url.do"method="post"target="targetIfr"><inputtype="text"name="name"/></form><iframename="targetIfr"style="display:none"></iframe>
2.通过type=submit提交
一般表单提交通过type=submit实现,inputtype="submit",浏览器显示为button按钮,通过点击这个按钮提交表单数据跳转到/url.do
<formaction="/url.do"method="post"><inputtype="text"name="name"/><inputtype="submit"value="提交"></form>
3.js提交form表单
js事件触发表单提交,通过button、链接等触发事件,js调用submit()方法提交表单数据,jquery通过submit()方法
<formid="form"action="/url.do"method="post"><inputtype="text"name="name"/></form>
js:document.getElementById("form").submit();jquery:$("#form").submit();
4.ajax异步提交表单数据
采用ajax异步方式,通过js获取form中所有input、select等组件的值,将这些值组成Json格式,通过异步的方式与服务器端进行交互,一般将表单数据传送给服务器端,服务器端处理数据并返回结果信息等
<formid="form"method="post"><inputtype="text"name="name"id="name"/></form>varparams={"name",$("#name").val()}$.ajax({type:"POST",url:"/url.do",data:params,dataType:"json",success:function(respMsg){}});
5.页面无跳转
如果通过form表单提交请求服务端去下载文件,这时当前页面不会发生跳转,服务端返回void,通过response去写文件数据,页面会显示下载文件。
<formaction="/url.do"method="post"><inputtype="text"name="name"/><inputtype="submit"value="提交"></form>@RequestMapping(value="/url")publicvoidexportFile(HttpServletRequestreq,HttpServletResponseresponse,StringrptId)throwsException{OutputStreamout=null;try{StringrptName="file";StringfileName=newString((rptName+excelAble.getFileSuffix()).getBytes("GBK"),"8859_1");response.reset();response.setContentType("application/octec-stream");response.setHeader("Content-disposition","attachment;filename="+fileName);out=response.getOutputStream();excelAble.exportFile(out);}catch(Exceptione){logger.error(e);}finally{if(out!=null){out.close();}}}
6.form表单上传文件
使用form表单进行上传文件需要为form添加enctype="multipart/form-data"属性,除此之外还需要将表单的提交方法改成post,如下method="post",inputtype的类型需要设置为file
<formaction="/url.do"enctype="multipart/form-data"method="post"><inputtype="file"name="name"/><inputtype="submit"value="提交"></form>