写在前面:
刚接触web开发,列举下几种接收方式,有来自笔者自己的还有网络上的实例汇总。
html页面:
用到一些jquery和ajax,以及可能会出现部分thymeleaf,thymeleaf在这里是没影响,没删除干净
后台:
springboot 2.1,在这里其实是springMVC在做事所以对于Spring框架都通用
关于HTTP参数传递
在开始举例子之前,我们先简单聊聊在HTTP的请求中参数是怎么被组织的,被传递的。
HTTP参数传递有两大类型
- URL参数
- 如url中的localhost:8080?h2=3&h3=3
- 和下面提到的几种类型不同,这种参数的获取需要从url中解析出来,因此单独拿出来说。
- 在request的body中的数据
- 如,表单数据(form),和常见的json类型的数据,都是存储在body中,传递出去的。
- 虽然常见后台对不同类型的数据有不同的解析方式,但是他们都在body中,以特殊的文件头形式存在,或者在Content-type中指定好类型告诉后端如何解析他。
- 下图是后台打印request.Body中的内容,分别传递了三次不同类型参数的方式。
关于表单
了解他提交了什么,以什么形式,提交到哪里去是非常重要的,这些在form的属性中有定义,需要注意的是用ajax之类的方式提交时可以修改这三者,不要以为form设置了就万事大吉,除非你提交的是formData(雾)
提交形式:enctype
post方式提交才会生效,enctype 这个属性是来设置提交方式,目前常用的是两种编码方式:application/x-www-form-urlencoded
和 multipart/form-data
, 这二个规则的使用场景简单地说就是:后者在上传文件时使用,前者是二进制流
提交内容:成功控件
成功控件指form里的<input>,<select>之类的能够获取到键值对的标签,以<input value="123" name="name">为例是一个
key=name,value=123的键值对
提交到哪里去:action,ajax中的url
action和ajax中指定的url
有篇博客详细的介绍了,参考博客:https://www.cnblogs.com/luoqian/p/7115852.html
1.无刷新页面提交表单
表单可实现无刷新页面提交,无需页面跳转,如下,通过一个隐藏的iframe实现,form表单的target设置为iframe的name名称,
form提交目标位当前页面iframe则不会刷新页面
<form action="/url.do" method="post" target="targetIfr">
<input type="text" name="name"/>
</form>
<iframe name="targetIfr" style="display:none"></iframe>
2.通过type=submit提交
一般表单提交通过type=submit实现,input type="submit",浏览器显示为button按钮,通过点击这个按钮提交表单数据跳转到/url.do,如果需要
<form action="/url.do" method="post">
<input type="text" name="name"/>
<input type="submit" value="提交">
</form>
3.js提交form表单
js事件触发表单提交,通过button、链接等触发事件,js调用submit()方法提交表单数据,jquery通过submit()方法
<form id="form" action="/url.do" method="post">
<input type="text" name="name"/>
</form>
<script type="text/javascript">
document.getElementById("form").submit();
$("#form").submit();
</script>
前3种方式的接收,通过这种方式可以接收form中定义的键值对
如果参数名和input中的name相同,可以省略@requestParam
@ResponseBody
@PostMapping("login")
public String login(@RequestParam String username,
@RequestParam String password,
){
return "get";
}
,在springboot中还可以用@PathVariable从url中获取参数值,获取url中明文存在的参数可以用这种方式,这里略
4.ajax+jq+获取并提交表单数据
采用ajax异步方式,通过js获取form中所有input、select等组件的值,将这些值组成Json格式,通过异步的方式与服务器端进行交互,在这里如果不想实现页面跳转onsubmit中的function return false
一般将表单数据传送给服务器端,服务器端处理数据并返回结果信息等
<form method="post" onsubmit="return signup()">
<input type="text" class="form-control" id="account" />
<input type="text" class="form-control" id="nickName" />
<input type="password" class="form-control" id="password" />
<button type="submit" class="btn btn-block btn-md btn-primary">
signup
</button>
</form>
<script type="text/javascript">
//todo 检查密码
function signup() {
var account = $('#account');
var name = $('#username').val();
var password = $('#password').val();
$.ajax({
url:"/signup",
type:"POST",
contentType:"application/json",//前面有提过,这是数据的编码方式,指定这个方式后台才能以正确的形式接受,这里后台接收的是json格式的String
dataType:"json",
data:JSON.stringify({
"account":account,
"insttitution":institution,
"name":name,
"password":password
})
});
return false;
}
</script>
后台接收方式:application/json接收方式为@requestBody,因为spring缺少直接转json对象的包,所以引入jackson之类的包能使用@RequestBody JSONObject json 的方式接收json数据
@PostMapping("signup")
@ResponseBody
public String signup(@RequestBody String json){//@RequestBody JSONObject json
System.out.println(json);
return "get";
}
5,还存在绑定对象接收,就是有一个属性和表单提交数据格式名字相同的对象来接收,这里略
以上方式其实可以归为两大类,也就是contentType不同接收方式的不同
6,文件上传与接收,指定enctype=
multipart/form-data方式的接收也就是文件上传
<form method="post" action="/upload" enctype="multipart/form-data">
<input type="file" name="file"><br>
<input type="submit" value="提交">
</form>
接收方式可以使用第一种
@PostMapping("/upload")
@ResponseBody
public String upload(@RequestParam("file") MultipartFile file) {
return "get";
}
7,ajax+formData+jq提交表单
如果要使用ajax提交包含文件的表单数据,表单的enctype指定multipart/form-data,然后接收方式跟1-4种相同
<script type="text/javascript">
function f() {
var formData = new FormData($('#projectForm')[0]);
$.ajax({
url:"/project/test",
type:"post",
data:formData,
processData:false,
contentType:false,
success:function (result) {
if (result && result.success) {
// window.location.href = "/index";
} else {
alert(result.msg);
}
}
});
return false;
}
</script>
后端接收方式:
@PostMapping("/test")
@ResponseBody
public RestResponseBo test(@RequestParam("projectName") String name,
@RequestParam("projectId") String id,
@RequestParam("projectLeader") String leader,
@RequestParam("budget") String budget,
@RequestParam("ins") String ins,
String level,
String[] member,
@RequestParam("projectFile") MultipartFile file,
HttpServletRequest request){
String[] teamMember = request.getParameterValues("team");
System.out.println("in!!!!!!!!!!!!!!!!!!!!!!!!!");
System.out.println(teamMember.length);
return RestResponseBo.ok();
}
}