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);
        }
	}
           

以上就是一個很簡單的登入校驗，更多源碼，關注公衆号【翎幺碼】，回複 登入注冊校驗，自動擷取。