【java web】--Ajax异步判断用户名是否存在

前端之家收集整理的这篇文章主要介绍了【java web】--Ajax异步判断用户名是否存在前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

  判断用户名是否存在,在很多项目中很常用。为了更好的用户体验度,把弹出框的形式升级成了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;
	}


很基础的知识,希望对大家有帮助!

原文链接:https://www.f2er.com/ajax/162514.html

猜你在找的Ajax相关文章