Spring+Ajax实现登录功能

在开发中尤其是登录功能功能，我们用的比较多的是Ajax的异步请求方式实现的，下面是我在一个springmvc项目中使用Ajax实现的登录以及注册功能的过程：

（整理不易，参考使用，记得点赞）

1.首先异步请求一定不能是用from表单来提交数据，下面这一段是html页面中用于输入用户名和密码的表单以及提交请求用的button按键

	<div class="col-sm-10">
	  用户名：<input type="text" name="uname" id="username" placeholder="请输入用户名" required>
	</div>
	<div class="form-group">
	  密码：<input type="password" name="upwd" id="pwd" placeholder="请输入密码" required>
	</div>
	<div class="col-sm-offset-2 col-sm-10">
		<button type="button" class="btn btn-primary" onclick="login()">登录</button>
	</div>
	<div class="col-sm-offset-2 col-sm-10">
		<span id="span1"></span>
	</div>

2.点击登录会有一个单击事件，我们的ajax请求就是在这个事件里来完成的，下面是function方法中的代码：

<script type="text/javascript">
		function login(){
			这里我们先通过id获取到用户名和密码的值
			var name = $("#username").val();	
			var pwd = $("#pwd").val();
			$.post(
				"/login",						请求的地址为login
				"uname="+name+"&upwd="+pwd,		将参数传递过去
				function(data){					用回调函数接收传回来的值
					if(data!=""){				判断传回的参数做响应的操作
	    				location.href="/tomain"
					}else{
						$("#span1").html('<font color=\'red\'>账户名或密码错误！</font>');
					}})}
	</script>

3.下面是java的controller的代码部分，Ajax请求的话就需要在函数上方添加上@ResponseBody的注解，将用户名和密码传过来后在业务逻辑层进行验证，这里就不再演示，最后return的值可以是一个对象可以是数值，如果需要的话可以再创建一个session对象用来储存用户的信息

//完成登录功能的账户密码校验功能
	@RequestMapping("login")
	@ResponseBody
	public Users login(String uname,String upwd,HttpSession httpsession){
		Users user = userservice.selectOne(uname, upwd);
		if(user!=null){
			httpsession.setAttribute("user", user);
			
		}
		return user;
	}

4.最终的页面展示效果，如果输入的信息有误可以根据回调函数传回来的结果给出相应的提示，如果输入信息正确就跳转到要去的页面：