【java web】--Ajax非同步判斷使用者名稱是否存在

　　判斷使用者名稱是否存在，在很多專案中很常用。為了更好的使用者體驗度，把彈出框的形式升級成了Ajax的形式，這樣的好處是，非同步觸發，無需等待，非同步重新整理，節省伺服器資源消耗。

　　思路大概如下：

　　１．首先我們要有一個地方，盛放Ajax的判斷結果，在前臺Jsp頁面寫一個span標籤，id為showResult，使用者名稱是否存在的頁面樣式會顯示到span標籤裡面。

 

<div class="zydj01 ma15">
					<span class="zyt">採摘領導：</span>
					<span class="zyz">
						<input type="text" onBlur="checkIsExist();" name="custrealname" id="custrealname"  value="請輸入領導使用者名稱/手機號" onFocus="if(value==defaultValue){value='';this.style.color='#000'}" onBlur="if(!value){value=defaultValue;this.style.color='#999'}" style="color:#999999" >
						
					</span>	
					 <span id="showResult"></span>				
				</div>

　　２．其次，我們輸入使用者名稱後，離開輸入框，需要通過onblur事件（物件失去焦點後發生）觸發判斷使用者名稱是否存在的JS事件。觸發的事件是checkIsExist();

     

//判斷使用者名稱是否可用的js  王美  2016年1月12日09:49:31	
    function checkIsExist() { 
    	
        var realname = $.trim($("#custrealname").val());  
        $.ajax({  
            type:"POST",   //http請求方式  
            url:"${path}/app/isExist.json",//傳送給伺服器的url  
            data:"realname="+realname, //傳送給伺服器的引數  
            dataType:"json",  //告訴JQUERY返回的資料格式(注意此處資料格式一定要與提交的controller返回的資料格式一致,不然不會呼叫回撥函式complete)  
            complete : function(msg) {  
              var result = eval("(" + msg.responseText + ")"); 
              if(result.success) {                  
                  $("#showResult").hide();  
                } else {  
                  $("#showResult").show().html(result.message);   
                }   
           }   
        });  
    } 

       ３．Ajax傳送非同步請求到Ajax的引擎，傳送後繼續響應使用者介面，從伺服器得到資料後，呼叫callback()函式，響應資料請求。

需要了解Ajax原理的可以參考我之前的部落格Ajax拾遺--【DRP】

       

	// 查詢賬戶是否存在  王美  2016年1月12日15:21:00
	@ResponseBody
	@RequestMapping(value = "/isExist.json", method = { RequestMethod.POST,RequestMethod.GET })
	public AppResultDTO isExist(String realname) {

		AppResultDTO result = new AppResultDTO();  	           
         	    boolean success = this.isExistUserName(realname);  	          
	    result.setSuccess(success);  
	          
	    if(success) {  
	        result.setMessage("<font color='green'>使用者名稱存在，可用</font>");  
	    } else {  
	        result.setMessage("<font color='red'>使用者不存在</font>");  
	    }  
	    return result;  
	} 

	//2.判斷使用者名稱是否存在--王美--2016年1月11日09:04:49
	@ResponseBody  
	@RequestMapping(value = "/isExistUserName.json",method={RequestMethod.POST,RequestMethod.GET})   
	public boolean isExistUserName(String realname) {
		int count = appPickRecordService.findByUserName(realname);
		if (count > 0) {
			return true;
		}
		return false;
	}

很基礎的知識，希望對大家有幫助！