设置前端的一个失去焦点的方法 input的id是loginName 用户名为空span是id loginnameResult
ajax是使用的 jquery封装的ajax方法
通过get方法 查找用户名
查找密码是使用的post方法
两个代码如下:
$(document).ready(function () {
/*查询关于登录用户名的Ajax方法*/
$("#loginName").blur(function () {
$.ajax({
type: "GET",
dataType: "json",
url: "/user/searchName?loginName=" + $("#loginName").val(),
success: function (data) {
if (data.success) {
$("#loginNameResult").html(data.msg);
} else {
$("#loginNameResult").html("出现错误:" + data.msg);
}
},
error: function (jqXHR) {
alert("发生错误:" + jqXHR.status)
}
});
});
/*查询关于登录密码的Ajax方法*/
$("#loginPWD").blur(function () {
$.ajax({
type: "POST",
url: "/user/searchPwd",
dataType: "json",
data: {
loginPWD: $("#loginPWD").val(),
},
success: function (data) {
if (data.success) {
$("#loginPWDResult").html(data.msg);
}
},
error: function (jqXHR) {
alert("发生错误:" + jqXHR.status)
}
});
});
});
后台:
就是正常获取参数来进行处理就好 (未展示实际业务逻辑)
@CrossOrigin //跨域
@Controller
@RequestMapping("/user")
public class UserController {
private static Logger logger = LoggerFactory.getLogger("UserController");
@GetMapping("/login")
public String login(HttpServletRequest httpServletRequest) {
if (httpServletRequest.getSession().getAttribute("admin")!=null){
logger.info(httpServletRequest.getRemoteHost()+"当前已登录了账号");
return "/user/myAdmin";
}
return "/user/login";
}
@GetMapping("/searchName")
@ResponseBody
public Map<String,Object> search(@RequestParam("loginName") String loginName) {
Map<String,Object> res = new HashMap<>();
if ("".equals(loginName)){
res.put("success","false");
res.put("msg","用户名为空");
}else {
res.put("success","true");
res.put("msg","");
}
return res;
}
@PostMapping("/searchPwd")
@ResponseBody
public Map<String,Object> searchPwd(@RequestParam("loginPWD") String loginPWD) {
Map<String,Object> res = new HashMap<>();
if ("".equals(loginPWD)){
res.put("msg","密码为空");
res.put("success","false");
}else {
res.put("msg","");
res.put("success","true");
}
return res;
}