Ajax登录注册校验

Ajax登录注册校验

Ajax作为异步交互的首选技术，在不刷新整个页面的情况下，就能更新页面需要的数据。

一个web项目必不可少的功能就是登录注册了，但是怎样做到能让用户在输入用户名密码后第一时间知道输入的是否正确，而不是点击登录才告诉用户，如果是这样，页面重新刷新，用户认真填写的数据将会丢失，体验不是很好。

今天就来和大家分享一下Ajax是如何做异步的数据校验的，页面无需刷新，也能够得到我们想要的后台数据。

先和大家看看效果。

当我输入admin，再去输密码时，页面没有任何反应

当我输入admin01，再去输密码时，页面立马出现了一行提示，并且用户名输入框变红了。

这是为什么呢？

应为在数据库中存有admin这个账号，admin01不存在，所以就会提示你”非法用户，请您重新输入“。

那究竟为什么呢，为什么我光标一离开输入框，就立马能知道账号是否存在数据库中呢。其实很简单，就是触发了一个函数，该函数通过ajax访问了服务端的接口，服务端处理完之后，将结果返回给ajax，然后，由前端展示就可以了。

咱们看看它是怎么实现的。

• 前端jsp代码

<script type="text/javascript" src="js/jquery.min.js"></script> <%--必须引入jquery--%>
<input type="text" placeholder="请输入登录名"  οnchange="tocheckLoginname()" id="loginname" name="loginname"/>

其中tocheckLoginname() 函数就是在光标离开后，被立刻触发。

那这个函数在哪儿定义了，就是在js文件中去定义

• js代码

function tocheckLoginname() {
		//先用js代码做校验,如果校验通过再进行ajax想服务器发送数据
		var loginname=document.getElementById("loginname").value;
			 $.ajax({
	             url:"checkLoginname",
	             type:"post",
	             data:{"loginname":loginname},
	             dataType:"text",
	             beforeSend:function(){
	             },
	             success:function(message){
	            	 document.getElementById("test").value = message;
	            	if(message!=""){
	            		 document.getElementById("loginname").focus();
	            		 $('#loginname')[0].style.border="1px solid rgb(229,58,49)";
	            	}else{
	            		 $('#loginname')[0].style.border="1px solid #ccc";
	            	}
	             }
	          });
	}

url中定义了后台的接口，data中定义了参数，message是后台返回的数据。

后端反馈的结果将会被写到前端id名为test的input中的value。默认是隐藏的，value值为空。

<input id="test" disabled="disabled" value="" style= "background-color:transparent;border:0;color: red"/> 

• 再看看后台的代码

 @RequestMapping(value="checkLoginname",method = RequestMethod.POST)
	@ResponseBody
	public void checkLogin(@RequestParam("loginname") String loginname,HttpServletResponse response) throws IOException {
		response.setContentType("application/text;charset=utf-8");
		PrintWriter out = response.getWriter();
        if(ahualyService.findUserByLogin(loginname)==null) { //查询数据库
        	loginameMessage = "非法用户,请您重新输入";
        	out.write(loginameMessage);
        }else {
        	loginameMessage ="";
        	out.write(loginameMessage);
        }
	}

以上就是一个很简单的登录校验，更多源码，关注公众号【翎幺码】，回复 登录注册校验，自动获取。