使用ajax来验证登录

最新推荐文章于 2022-12-05 00:51:31 发布

意言之

最新推荐文章于 2022-12-05 00:51:31 发布

阅读量1.2k

点赞数

文章标签： ajax javascript 前端

本文链接：https://blog.csdn.net/weixin_56863206/article/details/126234005

版权

这篇博客介绍了如何在HTML页面中使用Ajax进行登录验证。通过jQuery库发送POST请求到后端控制器，根据返回的JSON结果提示用户验证成功或失败。控制器中实现了检查用户名和密码的方法，如果匹配则返回状态为1，否则返回状态为0。

摘要由CSDN通过智能技术生成

使用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;
      }
    }
}