form 表单提交的⼏种⽅法
form表单提交的⼏种⽅法
在form标签中添加Action(提交的地址)和method(post)，且有⼀个submit按钮
（<input type='submit'>）就可以进⾏数据的提交，每⼀个input标签都需要有⼀个name属性，才能进⾏提交
当点击登陆时，向发⽣的数据是：username=username&password=password.
这种默认的提交⽅式，⼀般会进⾏页⾯的跳转(不成功时跳转到当前页⾯)。⽽有时候我们是对弹出框进⾏数据提交的，希望提交成功则关闭弹出框并刷选⽗页⾯，失败则提⽰失败原因，且弹出框不关闭。此时可以采⽤Ajax进⾏数据提交.
具体参考第四种⽅案
⽆刷新页⾯提交表单
表单可实现⽆刷新页⾯提交，⽆需页⾯跳转，如下，通过⼀个隐藏的iframe实现，form表单的target设置为iframe的name名称，
form提交⽬标位当前页⾯iframe则不会刷新页⾯
1 2 3 4<form action="/url.do"method="post"target="targetIfr">
<input type="text"name="name"/>
</form>
<iframe name="targetIfr" ></iframe>
通过type=submit提交
⼀般表单提交通过type=submit实现，input type=”submit”，显⽰为button按钮，通过点击这个按钮提交表单数据跳转到/url.do
1 2 3 4<form action="/url.do"method="post">
<input type="text"name="name"/>
<input type="submit"value="提交">
</form>
js提交form表单
html5游戏界面素材js事件触发表单提交，通过button、链接等触发事件，js调⽤submit()⽅法提交表单数据，jquery通过submit()⽅法
1 2 3 4 5 6 7 8 9 10<form id="form"action="/url.do"method="post">
buysomebooks的中文<input type="text"name="name"/>
</form>
<script>
jquery: $("#form").submit();
jquery下载文件请求</script>
ajax异步提交表单数据
采⽤ajax异步⽅式，通过js获取form中所有input、select等的值，将这些值组成Json格式，通过异步的⽅式与服务器端进⾏交互，⼀般将表单数据传送给服务器端，服务器端处理数据并返回结果信息等
1
2 3 4 5 6 7 8 9 10 11<form id="form"method="post">web重构工程师招聘
<input type="text"name="name"id="name"/> </form>
var params = {"name", $("#name").val()}
$.ajax({
type: "POST",
url: "/url.do",
data: params,
dataType : "json",
success: function(respMsg){
}
});
11
12  });
此时可以在callback函数中对请求结果进⾏判断，然后执⾏不同的动作(页⾯跳转或刷选数据、提醒错误都可以)
页⾯⽆跳转
如果通过form表单提交请求服务端去下载⽂件，这时当前页⾯不会发⽣跳转，服务端返回void，通过response 去写⽂件数据，页⾯会显⽰下载⽂件。1
2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26<form action="/url.do"method="post">
<input type="text"name="name"/>
<input type="submit"value="提交">
</form>
@RequestMapping(value = "/url")
public void exportFile(HttpServletRequest req, HttpServletResponse response, String rptId)            throws Exception {
OutputStream out= null;
try {
商城源码String rptName = "file";
String fileName = new String((rptName + FileSuffix()).getBytes("GBK"),                    "8859_1");
response.setContentType("application/octec-stream");
response.setHeader("Content-disposition", "attachment; filename="+ fileName);
out= OutputStream();
} catch (Exception e) {
<(e);
} finally {
if (out!= null) {access英语
out.close();
}
}
}
form表单上传⽂件
使⽤form表单进⾏上传⽂件需要为form添加enctype=”multipart/form-data” 属性，除此之外还需要将表单的提交⽅法改成post，如下 method=”post”, input type的类型需要设置为file
1 2 3 4<form action="/url.do"enctype="multipart/form-data"method="post">    <input type="file"name="name"/>
<input type="submit"value="提交">
</form>
附件只能通过submit⽅法进⾏提交，

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。