【java web】--Ajax非同步判斷使用者名稱是否存在
阿新 • • 發佈:2018-12-29
判斷使用者名稱是否存在,在很多專案中很常用。為了更好的使用者體驗度,把彈出框的形式升級成了Ajax的形式,這樣的好處是,非同步觸發,無需等待,非同步重新整理,節省伺服器資源消耗。
思路大概如下:
1.首先我們要有一個地方,盛放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>
2.其次,我們輸入使用者名稱後,離開輸入框,需要通過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); } } }); }
3.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;
}
很基礎的知識,希望對大家有幫助!