使用ajax来验证登录
login.html这里我把用户名和密码放在一块验证了，只用了一个回调函数，也可以分开使用两个回调函数，来局部刷新，原理都一样
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" th:src="@{/js/jquery-1.11.1.min.js}"></script>
<script type="text/javascript" th:inline="javascript">
$(function(){
$("#btn").click(function(){
var name1=$("#names").val();
var password1=$("#psw").val();
$.ajax({
url:[[@{/user/checklogin}]],
type:"post",
data:{
"name":name1,
"password":password1
},
dataType:"json",
success:function(results){
if(1==results.status){
alert("验证成功");
}else{
alert("验证失败");
}
}
})
})
})
</script>
</head>
<body>
用户名:
<input th:type="text" id="names" th:name="name" placeholder="请输入用户名" />
<br /> 密码 :
<input th:type="password" id="psw" th:name="password"
placeholder="请输入密码">
<input type="button" id="btn" th:value="登录">
</body>
</html>
controller层
@Controller
@RequestMapping("/user")
public class UserController {
@Autowired
private UserService userservice;
@RequestMapping("/login1")
public String login1(){
return "login";
}
@RequestMapping("/checklogin")
@ResponseBody
public String checklogin1(String name,String password){
User user1=userservice.SelectByName(name);
String results="{\"status\":0}";
if(user1==null){
return results;
}else if(!(user1.getPassword().equals(password))){
return results;
}else{
results="{\"status\":1}";
return results;
}
}
}
