用JQuery的Ajax与SpringMVC通信

在项目“物业报修系统”中,当项目进行到登录模块时,遇到了一个瓶颈:前端与后台之间的通信。系统重构后使用了前后端彻底分离的机制,采用RestFul的接口设计,前端代码中不再嵌入后端的代码,所以就不能通过JSP的表单submit方法提交用户名与密码了。所以,到底应该怎么办呢?

经过考虑和相应的学习,我决定使用JQuery中的Ajax方法,原因是它的使用非常方便和简洁。

前端

在前端的网页中,写出这么一个函数供登录按钮调用(网页需引入JQuery):

1
2
3
4
5
6
7
8
9
10
11
12
13
<script>
function myLogin() {
$.post("/student/login",
{
email: "qiuych3@mail2.sysu.edu.cn",
password: "qiuyongchen"
},
function (data) {
alert("Data: " + data.name + "\n");
});
}
;
</script>

它使用post方法,以json格式将email和password两个参数传给服务器,服务器以json格式返回一个data对象。

后台

在SpringMVC的控制器中写这么一个函数:

1
2
3
4
5
6
7
8
9
@RequestMapping(value = "/login", method = RequestMethod.POST)
public @ResponseBody Student login(String email, String password, HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) {

logger.info("***************************************************************************");
logger.info("email : " + email + " password : " + password);
logger.info("***************************************************************************");

return new Student("邱永臣", "sdfsdfa");
}

SpringMVC将前端传来的email和password传给该函数。该函数的@ResponseBody注解表明函数会以json的形式返回一个student对象。