话不多说，开门见山，直奔主题，直接上代码~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>安全登录</title>
</head>
<body>
<input type="text" name="username" id="username"><br><br>
<input type="password" name="password" id="password"><br><br>
<button onclick="login()">走你</button>
</body>
</html>get方式请求：
<script type="text/javascript">
function login () {
var a = document.getElementById("username").value;
var b = document.getElementById("password").value;
var xhr = new XMLHttpRequest();
xhr.open("get", "/login?username=" + a + "&password=" + b);
xhr.send();
xhr.onload = function () {
console.log(xhr.responseText);
}
}
</script>post方式请求：
<script type="text/javascript">
function login () {
var a = document.getElementById("username").value;
var b = document.getElementById("password").value;
var xhr = new XMLHttpRequest();
xhr.open("post", "/api/user/login");
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send("username= "+a+" &password= "+b+"");
xhr.onload = function () {
console.log(xhr.responseText);
}
}
</script>后端：两种方式后端都能直接接收到前端传值
@RequestMapping("/login")
@ResponseBody
public BaseResult login (String username, String password, HttpServletRequest request) {
User user = userRepository.findByUsernameAndPassword(username, password);
if (user != null) {;
return BaseResult.ok(true, "登录成功", user);
}
return BaseResult.error(false, "用户名或密码错误");
}end~
1040
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
