Ajax 返回 JSON
@responseBody
@responseBody 注解的作用是将 controller 的方法返回的对象通过适当的转换器转换为指定的格式之后,写入到 response 对象的 body 区,通常用来向异步请求返回 JSON 数据。
注意:在使用此注解之后不会再走视图处理器,而是直接将数据写入到输入流中,他的效果等同于通过 response 对象输出指定格式的数据。
添加 jackson.jar 包
<!--jackson 对象转json插件-->
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>2.9.1</version>
</dependency>
登录案例
我们使用搭建好的前端界面利用服务器与后端进行交互
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>后台管理</title>
<link href="css/login.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
function login(){
$.post("login/login",$("#loginForm").serialize(),function(res){
if (res.code==201){
alert(res.msg);
}else if(res.code==200){
alert(res.msg);
window.sessionStorage.setItem("account",res.data.account);
window.sessionStorage.setItem("newFileName",res.data.newFileName);
location.replace("success.html");
}
},"json");
}
</script>
</head>
<body>
<div class="login_box">
<div class="login_l_img"><img src="images/login-img.png" /></div>
<div class="login">
<div class="login_logo"><a href="#"><img src="images/login_logo.png" /></a></div>
<div class="login_name">
<p>后台管理系统</p>
</div>
<form method="post" id="loginForm">
<input name="account" type="text" value="账号">
<input name="password" type="password" id="password" />
<input value="登录" style="width:100%;" type="button" onclick="login()">
</form>
</div>
<div class="copyright">某某有限公司 版权所有©2016-2018 技术支持电话:000-00000000</div>
</div>
</body>
</html>
后端向前端响应数据时,统一数据格式,封装CommonResult类,封装响应结果 code msg data
package com.qn.ssm.common;
/**
* 结果封装类
*/
public class CommonResult<T> {
private Integer code;
private String msg;
private T data;
public CommonResult(Integer code, String msg, T data) {
this.code = code;
this.msg = msg;
this.data = data;
}
public Integer getCode() {
return code;
}
public void setCode(Integer code) {
this.code = code;
}
public String getMsg() {
return msg;
}
public void setMsg(String msg) {
this.msg = msg;
}
public T getData() {
return data;
}
public void setData(T data) {
this.data = data;
}
}
LoginController代码
向ajax请求响应数据,springmvc添加@ResponseBody后,将return的对象直接转为json(添加jar包)
package com.qn.ssm.controller;
import com.qn.ssm.common.CommonResult;
import com.qn.ssm.model.Admin;
import com.qn.ssm.service.LoginService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpSession;
@RestController
@RequestMapping(path = "/login")
public class LoginController {
@Autowired
LoginService loginService;
/*
登录处理方法
/*
向ajax请求响应数据,
springmvc添加@ResponseBody后,将return的对象直接转为json(添加jar包)
后端向前端响应数据时,统一数据格式,封装CommonResult类,封装响应结果 code msg data
*/
//登录验证部分代码
@PostMapping(path = "/login")
public CommonResult login(Admin admin, HttpSession session){
CommonResult commonResult = null;
try {
Admin admin1 = loginService.login(admin);
if(admin1==null){
commonResult = new CommonResult<Admin>(201,"账号或密码错误" , null);
}else{
session.setAttribute("admin",admin1);
commonResult = new CommonResult<Admin>(200,"登录成功" , admin1);}
}catch (Exception e){
e.printStackTrace();
commonResult = new CommonResult<Admin>(500,"登录失败" , null);
}
return commonResult;
}
//安全退出部分代码
@GetMapping(path="/loginOut")
public void loginOut(HttpSession session){
session.invalidate();
}
}
交互过程
前端(login.html)通过触发事件收集表单数据发起post请求开始访问Control层根据请求地址(/login/login)开始执行方法,在Control层利用Service层生成的LoginService对象,进行访问Dao层再通过接口映射实现与数据库信息的访问与交互验证.
简单测试部分
数据库中事先存好的信息
进行验证
登录成功跳转页面