Ajax验证用户名案例

前台页面：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>验证用户名</title>
		<script type="text/javascript">
	     	// 创建ajax对象
	    	function createAjax(){
	    		try{
				return new XMLHttpRequest();// 非IE6浏览器，主流浏览器支持的
			}catch(e){
				return new ActiveXObject("Microsoft.XMLHTTP");//IE6浏览器以下创建的核心对象
			}
	    	} 
        	// 判断用户名是否正确的方法
        	function checkName(obj){
        		/* 
    	    	        内置属性： 直接.获取到值
    	    	        自定义属性：通过getAttribute("属性名")来获取对应的值 
    	    	        */
        		if(!obj.value){
	    			document.getElementById("username").innerHTML="用户名必填！";
	    			return false;
	    		}
        		// 1.创建ajax核心对象
        		var ajax = createAjax();
        		// 2.以异步方式发出get请求  true:异步     false:同步
			ajax.open("get","/zq/checkName?username="+obj.value,true); 
        		// 3.监听ajax状态，http响应状态       (注意：必须放在send之前执行)
        		ajax.onreadystatechange = function(){
          			if(ajax.readyState == 4 && ajax.status == 200){  //ajax已经处理完成并且http响应状态是200
          				//ajax.responseText 返回过来是纯字符串
	    				if(ajax.responseText=='true'){
	    					document.getElementById("username").innerHTML="";
	    					document.getElementById("btn").disabled = false;
	    				}else{
	    					document.getElementById("username").innerHTML="用户名已存在...";
	    					document.getElementById("btn").disabled = true;
	    				}
          			}
        		}
        		// 4.发出请求
        		ajax.send();
        	}
        </script>
	</head>
	<body>
		<form action="">
			<input type="text" onblur="checkName(this);" name="username"><span id="username" style="color:red"></span><br/>
			<input type="text" name="password"><br/>
			<input type="button" id="btn" value="提交">
		</form>
	</body>
</html>

后台Controller：

/**
 * 验证用户名：
 * 注意：异步技术必须加@ResponseBody
 * @author 郑清
 */
@Controller
public class _02CheckNameController {

	@RequestMapping("/checkName")
	@ResponseBody
	public boolean checkName(String username) {
		System.out.println("用户名："+("admin".equals(username) ? true : false));
		return "admin".equals(username) ? true : false;
	}
	
}

运行效果：

点击下载项目资源

Ajax验证用户名案例

猜你喜欢