Spring MVC 前后台传值情况汇总

69 阅读 0 评论 46 点赞

我是靠谱客的博主拉长小甜瓜，最近开发中收集的这篇文章主要介绍Spring MVC 前后台传值情况汇总，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

一、前台通过$.ajax的GET请求传值

1.前端参数写在url中：
前台代码：

$.ajax({
type: 'GET',
url: '/user/login?username=admin&password=admin',
dataType: 'JSON',
success: function (res) {
$('#result').text(res);
},
error: function () {
$('#result').text('error!');
}
});

后台代码：

@Controller
@RequestMapping("/user")
public class UserController {
private static final Logger LOG = LoggerFactory.getLogger(UserController.class);
@Autowired
private UserService userService;
@RequestMapping(value = "/login", method = {RequestMethod.GET})
@ResponseBody
public boolean login(UserForm userForm) {
LOG.info("username: " + userForm.getUsername() + ";password: " + userForm.getPassword());
Map<String, String> param = new HashMap<String, String>();
param.put("username", userForm.getUsername());
param.put("password", userForm.getPassword());
return userService.checkUserExists(param);
}
}

2.前台data参数使用$.param()函数对JS对象进行转化

$.ajax({
type: 'GET',
url: '/user/login',
dataType: 'JSON',
data: $.param({
username: 'admin',
password: 'admin'
}),
success: function (res) {
$('#result').text(res);
},
error: function () {
$('#result').text('error!');
}
});

后台同上，不过也可以使用如下

@RequestMapping(value = "/login", method = {RequestMethod.GET})
@ResponseBody
public boolean login(String username, String password) {
LOG.info("username: " + username + ";password: " + password);
Map<String, String> param = new HashMap<String, String>();
param.put("username", username);
param.put("password", password);
return userService.checkUserExists(param);
}

前台data参数直接传JS对象

$.ajax({
type: 'GET',
url: '/user/login',
dataType: 'JSON',
data: {
username: 'admin',
password: 'admin'
},
success: function (res) {
$('#result').text(res);
},
error: function () {
$('#result').text('error!');
}
});

后台同上，不过也可以使用如下：

@RequestMapping(value = "/login", method = {RequestMethod.GET})
@ResponseBody
public boolean login(@RequestParam("username") String name, @RequestParam("password") String pass) {
LOG.info("username: " + name + ";password: " + pass);
Map<String, String> param = new HashMap<String, String>();
param.put("username", name);
param.put("password", pass);
return userService.checkUserExists(param);
}

注意：经验证$.ajax使用GET请求时
1.前台data参数不能为JSON串，否则后台无法接收，报415错误;
2.后台如果使用封装的Entity接收参数，不可以加@RequestBody注解，否则接收的参数都为NULL;

一、前台通过$.ajax的POST请求传值

前台使用JS对象时
前端代码：

$.ajax({
type: 'POST',
url: '/user/login',
dataType: 'JSON',
data: {
username: 'admin',
password: 'admin'
},
success: function (res) {
$('#result').text(res);
},
error: function () {
$('#result').text('error!');
}
});

后端同一中的三种接收方式。
至此已经感觉够用了，但是考虑后端接收参数能否直接使用Map接收，那么可不必再转化为Map即可调用后台的mybatis，这就用到了用到了@RequestBody
2. 修改前台代码，后台用@RequestBody 转为Map接收
前台代码：

$.ajax({
type: 'POST',
url: '/user/login',
contentType: 'application/json',
dataType: 'JSON',
data: JSON.stringify({
username: 'admin',
password: 'admin'
}),
success: function (res) {
$('#result').text(res);
},
error: function () {
$('#result').text('error!');
}
});

后台代码：

@RequestMapping(value = "/login", method = {RequestMethod.POST})
@ResponseBody
public boolean login(@RequestBody Map<String, String> param) {
return userService.checkUserExists(param);
}

当然也可以这样了：

@RequestMapping(value = "/login", method = {RequestMethod.POST})
@ResponseBody
public boolean login(@RequestBody UserForm userForm) {
LOG.info("username: " + userForm.getUsername() + ";password: " + userForm.getPassword());
Map<String, String> param = new HashMap<String, String>();
param.put("username", userForm.getUsername());
param.put("password", userForm.getPassword());
return userService.checkUserExists(param);
}