Spring Boot Ajax登錄
說明
IDEA新建Spring Boot項目，實現登錄——基於Ajax實現。
代碼
前端登錄頁面
login.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--jquery需要引入的文件-->
<script src="/js/jquery.js"></script>
<!--ajax提交表單需要引入jquery.form.js-->
<script src="/js/jquery.form.min.js"></script>
<script src="/js/login.js"></script>
</head>
<body>
<form method="post" id="loginForm">
用戶名 <input type="text" id="username" name="username" />
密 碼 <input type="password" id="password" name="password" />
<input type="button" value="登錄" id="loginButton"/>
</form>
</body>
</html>
前端ajax處理
$(function() {
$("#loginButton").on('click', function() {
var data = {}
data["username"] = $("#username").val();
data["password"] = $("#password").val();
$.ajax({
type: 'POST',
dataType: 'json',
contentType: "application/json",
data: JSON.stringify(data),
url: '/login.do',
async: false,
success: function(data) {
alert(data.status);
// window.location.href = '/index';
},
error: function(data) {
alert(data.status);
}
})
})
})
控制器
- 功能1：前端請求
http://localhost:8000/login，轉向登錄頁面login.html - 功能2：前端點擊登錄按鈕，發出請求，控制器處理並返回數據
@GetMapping("/login")
public String toLogin() {
return "login";
}
@PostMapping("/login.do")
@ResponseBody
public ResponseMessage<String> login(@RequestBody Info info) {
// 業務處理：賬號密碼驗證；cookie/session保存...
ResponseMessage<String> message = new ResponseMessage<>();
message.setStatus(200);
message.setMsg("登錄成功");
return message;
}
請求實體類
@Data
public class Info implements Serializable {
private String username;
private String password;
}
響應實體類
@Data
public class ResponseMessage<T> {
private int status;
private String msg;
private T data;
}
application.properties
server.port=8000
spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.suffix=.html