javaee论坛

普通会员

225648

帖子

355

回复

369

积分

楼主
发表于 2019-11-03 12:48:39 | 查看: 404 | 回复: 0

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>

 


您需要登录后才可以回帖 登录 | 立即注册

触屏版| 电脑版

技术支持 历史网 V2.0 © 2016-2017