Spring MVC传参是Spring学习中的比较容易混淆的地方,因为传参方式种类多,接受参数种类多,初学者较容易因为不懂HTTP参数传递原理,而摸不着头脑,该篇文章介绍Spring MVC参数绑定的几种方式。
一、JSP页面向Controller提交参数
1. 简单类型数据传递:
首先介绍jsp页面向Controller传递参数的两种方式,表单提交和ajax提交请求:
①表单提交(Content-Type默认为application/x-www-form-urlencoded),jsp和controller代码如下所示:
注:该方式参数名称需要和controller参数名称一致时,请求参数和形参才会发生绑定。
界面演示:
JSP代码:
<div>
<h3>普通表单提交方式传递参数</h3>
<form action="addNameAndAge" method="get">
<input type='text' name = 'name' placeholder="姓名"/>
<input type="number" name = 'age' placeholder="年龄"/>
<input type="submit" value="保存">
</form>
</div>
Controller代码:
@RequestMapping(value = "/addNameAndAge")
public ModelAndView addNameAndAge(ModelAndView modelAndView,String name, Integer age){
System.out.println(name + age + "岁了!");
modelAndView.setViewName("simple_form");
return modelAndView;
}
运行结果:张三12岁了!
GET和POST请求参数区别详解:
Post请求参数中文乱码解决方式参考:http://www.jianshu.com/p/435c13cfc769
②Ajax提交表单请求(Content-Type默认为application/x-www-form-urlencoded; charset=UTF-8),jsp代码如下,controller代码与①一致:
注:Ajax参数名称需要和controller参数名称一致时,请求参数和形参才会发生绑定。
<div>
<h3>AJAX提交</h3>
<form id="ajaxForm">
<input type='text' name='name' placeholder="姓名"/>
<input type="number" name='age' placeholder="年龄"/>
<!--type由submit改为button,并添加onclick事件-->
<input type="button" onclick="addNameAndAge();" value="保存"/>
</form>
<span id="ajaxResult"></span>
</div>
<script src="/js/jquery-3.1.1.js"></script>
<script type="text/javascript">
function addNameAndAge() {
$.ajax({
type: 'post',
url: '../test/addNameAndAge',
data: $('#ajaxForm').serialize(),
success: function (result) {
$('#ajaxResult').text("保存成功")
}
})
}
</script>
Ajax提交请求的参数如图所示:
注:(ajax默认 Content-Type为application/x-www-form-urlencoded; charset=UTF-8),所以不需要处理字符串乱码。
2. 简单POJO进行数据绑定:
注:请求的参数名称和对象中的属性名称一致则将参数值设置在pojo对象中,否则该请求参数将被忽略。
JSP代码:
<div>
<h3>简单POJO进行数据绑定</h3>
<form action="addUser" method="get">
<input type='text' name='name' placeholder="姓名"/>
<input type="number" name='age' placeholder="年龄"/>
<input type="date" name="birthday" placeholder="出生日期">
<input type="submit" value="保存">
</form>
</div>
Controller代码:
@RequestMapping(value = "/addUser")
public ModelAndView addUser(ModelAndView modelAndView, User user){
modelAndView.setViewName("simple_form");
System.out.println(user.getName() + user.getAge() + "岁了!");
return modelAndView;
}
User类:
public class User {
private String Name;
private Integer age;
private Date birthday;
....get set方法省略
}
运行结果:张三12岁了!
Spring Mvc不会自动进行日期转换,需要手动进行日期转换,参考https://www.cnblogs.com/liuconglin/p/5777879.html
3. 包装POJO进行数据绑定:
注:当请求参数是多个POJO的组合体时,需要对POJO进行包装,才能够将属性相绑定到对应的POJO上。此时需要将input框name属性值的格式properties改为pojo.properties,即包装POJO中pojo的名称加上pojo的属性名。
JSP代码:
<div>
<h3>包装POJO进行数据绑定</h3>
<form action="addUserVo" method="get">
<input type='text' name='user.name' placeholder="姓名"/>
<input type="number" name='user.age' placeholder="年龄"/>
<input type="date" name="user.birthday" placeholder="出生日期">
<input type="submit" value="保存">
</form>
</div>
Controller代码:
@RequestMapping(value = "/addUserVo")
public ModelAndView addUserVo(ModelAndView modelAndView, UserVo uerVo){
modelAndView.setViewName("simple_form");
User user = uerVo.getUser();
System.out.println(user.getName() + user.getAge() + "岁了!");
return modelAndView;
}
User类:
public class UserVo {
private User user;
....get set方法省略
}
运行结果:张三12岁了!
4. 绑定数组
注:input框name属性值需要与controller数组名称一致
界面演示:
JSP代码:
<div>
<h3>绑定数组</h3>
<form action="addArray" method="get">
<input type='number' name='age' placeholder="年龄1"/>
<input type="number" name='age' placeholder="年龄2"/>
<input type="number" name="age" placeholder="年龄3">
<input type="submit" value="保存">
</form>
</div>
Controller代码:
@RequestMapping(value = "/addArray")
public ModelAndView addArray(ModelAndView modelAndView, Integer[] age){
modelAndView.setViewName("simple_form");
for(int i : ages){
System.out.println(i);
}
return modelAndView;
}
运行结果:1 2 3
参数格式:
5. 绑定集合
注:集合必须使用BeanListModel格式接收才能够绑定得上,input框name属性值需要与数组名称一致,并且需要加上集合下标
JSP代码:
<div>
<h3>绑定集合</h3>
<form action="addList" method="get">
<input type='number' name='ages[0]' placeholder="年龄1"/>
<input type="number" name='ages[1]' placeholder="年龄2"/>
<input type="number" name="ages[2]" placeholder="年龄3">
<input type="submit" value="保存">
</form>
</div>
Controller代码:
@RequestMapping(value = "/addList")
public ModelAndView addList(ModelAndView modelAndView, UserVo userVo){
modelAndView.setViewName("simple_form");
for(int i : userVo.getAges()){
System.out.println(i);
}
return modelAndView;
}
在UserVo中新增ages参数:
public class UserVo {
private User user;
private List<Integer> ages;
....get set方法省略
}
运行结果:1 2 3
6. 绑定Map
注:需要在map前面加上@RequestParam参数,jsp的name等都不变
JSP代码:
<div>
<h3>绑定Map</h3>
<form action="addMap" method="get">
<input type='text' name='name' placeholder="姓名"/>
<input type="number" name='age' placeholder="年龄"/>
<input type="submit" value="保存">
</form>
</div>
Controller代码:
@RequestMapping(value = "/addMap")
public ModelAndView addMap(ModelAndView modelAndView,@RequestParam Map<String, Object> map){
modelAndView.setViewName("simple_form");
System.out.println(map.get("name").toString() + map.get("age").toString() + "岁了!");
return modelAndView;
}
运行结果:张三12岁了!
7. 绑定JSON
注:请求参数类型需要设置 contentType:'application/json’
界面演示:
JSP代码:
<div>
<h3>Json数据交互</h3>
<form id="jsonForm">
<input type='text' name='name' placeholder="姓名"/>
<input type="number" name='age' placeholder="年龄"/>
<!--type由submit改为button,并添加onclick事件-->
<input type="button" onclick="addJson();" value="保存"/>
</form>
<span id="jsonResult"></span>
</div>
<script src="/js/jquery-3.1.1.js"></script>
<script type="text/javascript">
function addJson(){
var user = {'name':$('#jsonForm').find('input[name="name"]').val(),'age':12};
$.ajax({
type: 'post',
url: '../test/addJson',
contentType:'application/json;charset=UTF-8',
dataType:'json',
data: JSON.stringify(user),
success: function (result) {
$('#jsonResult').text(result.name + result.age + "岁了!")
}
})
}
</script>
Controller代码:
@RequestMapping(value = "/addJson")
@ResponseBody
public User addJson(@RequestBody User user){
System.out.println(user.getName() + user.getAge() + "岁了!");
return user;
}
运行结果:张三12岁了!
8. Json 数组交互(后端用List接收)
注:请求参数直接stringify数组对象,如[1,2]
界面演示:
JSP代码:
<div>
<h3>Json 数组交互(后端用List接收)</h3>
<form id="jsonArrayForm">
<p>['足球','篮球']</p>
<!--type由submit改为button,并添加onclick事件-->
<input type="button" onclick="addJsonArray();" value="保存"/>
</form>
<span id="jsonArrayResult"></span>
</div>
<script type="text/javascript">
function addJsonArray(){
var likes = ['足球','篮球'];
$.ajax({
type: 'post',
url: '../test/addJsonArray',
contentType:'application/json;charset=UTF-8',
dataType:'json',
data: JSON.stringify(likes),
success: function (result) {
$('#jsonArrayResult').text('爱好:' + result);
}
})
}
</script>
Controller代码:
@RequestMapping(value = "/addJsonArray")
@ResponseBody
public List<String> addJsonArray(@RequestBody List<String> likes){
System.out.println("爱好:" + likes);
return likes;
}
运行结果:爱好:[足球, 篮球]
测试例子下载:https://download.csdn.net/download/qq_16143915/10708036
转载请注明出处:http://blog.csdn.net/qq_16143915/article/details/78697436