<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
<script src="${pageContext.request.contextPath}/statics/js/jquery-3.6.0.js"></script>
<script>
let a1;
let a2;
$(document).ready(function (){
a1=function(){
$.post({
url:'${pageContext.request.contextPath}/login',
data:{'pwd':$('#pwd').val(),'username':$('#username').val()},
dataType:"json",
success:function (data) {
console.log(data.pwdmsg)
if(data.usermsg==="用户名正确"){
$('#userInfo').css('color','green')
}else{
$('#userInfo').css('color','red')
}
$('#userInfo').html(data.usermsg)
$('#pwdInfo').html('')
}
})
}
a2=function () {
$.post({
url:'${pageContext.request.contextPath}/login',
data:{'pwd':$('#pwd').val(),'username':$('#username').val()},
dataType:"json",
success:function (data) {
console.log(data.pwdmsg)
if(data.pwdmsg==="密码正确"){
$('#pwdInfo').css('color','green')
}else{
$('#pwdInfo').css('color','red')
}
$('#pwdInfo').html(data.pwdmsg)
$('#userInfo').html('')
}
})
}
})
</script>
</head>
<body>
<p>
用户名: <input type="text" id="username" onblur="a1()">
<span id="userInfo"></span>
</p>
<p>
密码: <input type="text" id="pwd" onblur="a2()" >
<span id="pwdInfo"></span>
</p>
</body>
</html>

@RestController
public class AjaxController {
@RequestMapping("/login")
public String login(String username,String pwd){
System.out.println("...."+username);
System.out.println("...."+pwd);
String usermsg = "";
String pwdmsg = "";
if ("admin".equals(username)) {
usermsg="用户名正确";
}
else{
usermsg="用户名错误";
}
if ("123456".equals(pwd)){
pwdmsg="密码正确";
}
else{
pwdmsg="密码错误";
}
return JSON.toJSONString(new Msg(usermsg,pwdmsg));
}
}