添加用户时使用ajax异步判断用户名是否存在

最新推荐文章于 2020-01-08 23:30:12 发布

原创最新推荐文章于 2020-01-08 23:30:12 发布 · 832 阅读

4 ·

CC 4.0 BY-SA版权

JavaWeb 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一种使用onblur事件和Ajax技术实现的用户名实时校验方法。当用户在输入框中输入用户名并移开焦点时，该方法会检查用户名是否已被占用。如果用户名已存在，系统将立即显示错误信息；反之，则提示用户名可用。此方法增强了用户体验，避免了用户在填写完所有注册信息后才发现用户名不可用的情况。

第一步：

在用户名的输入框中加入oblur事件，如：

<td><input type="text" id="userName" name="userName" class="easyui-validatebox" onblur="isExistUserName()"/></td>
					<td id="error"></td>

onblur事件在焦点离开input时执行；

error行负责显示错误信息

第二步：

写onblur事件的Javascript代码，如：

function isExistUserName(){  
   var userName=document.getElementById("userName").value;  
   $.ajax({  
        type: "POST",      
        url: "../user/isExistName.do",      
        data: "userName="+userName,   
        success: function(data){  
      if(data=="true"){     
    	  document.getElementById("error").innerHTML ="<font color='red'>"+"用户名已存在！"+"</font>";  
      }else{     
    	  document.getElementById("error").innerHTML ="<font color='green'>"+"用户名可以使用！"+"</font>";    
      }   
      }            
    });     
 }

其中url是控制层用来判断用户名在数据库中是否存在的方法路径，返回值类型为boolean，这里通过response.getWriter().write("true/false")来将结果转换成json格式；

@RequestMapping("/isExistName")
	public void isExistName(HttpServletRequest request,HttpServletResponse response) throws IOException {
		String userName=request.getParameter("userName");
		if(userService.isExistUserName(userName)) {
		    	response.getWriter().write("true");
			}else {
			    response.getWriter().write("false");
			}
		}

效果如下图所示