服务器代码
@Controller@RequestMapping("/jwt")public class JWTController {@RequestMapping("/login")@ResponseBodypublic Result<String> login(String username, String password) {if (username == null || password == null) {return new Result<String>(789, "用户名或密码不正确", null);}User user = new User(1001, username, password);return new Result<>(200, "请求成功！", JSON.toJSONString(user));}}
ajax方式
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>登录页面</title><script src="js/jquery3.3.1.js" type="text/javascript"></script><form id="loginForm"><input type="text" name="username" value="zhangsan"><br><input type="password" name="password" value="123456"><button id="btn">登录</button></form></head><body><script>$(function () {$("#btn").click(function () {$.ajax({type:"post",dataType:"json", //预期服务器端返回的数据的类型url:"jwt2/login",data:$("#loginForm").serialize(),success:function (data) {console.info(data);}});});});</script></body></html>
post方式
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>登录页面</title><script src="js/jquery3.5.1.js" type="text/javascript"></script></head><body><form id="loginForm"><input type="text" name="username" value="zhangsan"><br><input type="password" name="password" value="123456"></form><button id="btn">登录</button><script>$(function () {let obj = {};function getObj(str) {let arr = str.split('&');arr.map(function (item) {let tempArr = item.split('=');obj[tempArr[0]] = tempArr[1];});console.log(obj);return obj;}$("#btn").click(function () {let p = $("#loginForm").serialize();let params = getObj(p);$.post("jwt/login",params,function (result) {//请求成功console.log(result);if (result.code == 200) {//获取令牌并保存到本地localStorage.setItem("token", '{"token":"' + result.data + '"}');}if (result.code == 789) {window.location = "login";}}, "JSON");});});</script></body></html>
