AJAX验证是否重复

AJAX验证用户代码重复

当焦点一离开就去检查

1.input对象的onblur事件

onblur="validate(this)"

2. 创建XMLHttprequest对象

function validate(field){
	if(trim(field.value).length != 0){
	var xmlhttp= null;
	if (window.XMLHttpRequest)
	<span style="white-space:pre">	</span>{// 表示当前浏览器不是IE，如 Firefox,Chrome,Opera,Safari
		    xmlHttp=new XMLHttpRequest();
		}else{// IE浏览器
		    xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
		}

3. xmlHttp.open("GET",url,true) 与Ajax引擎建立连接

var url = "user_validate.jsp?userId=" + trim(field.value) + "&time=" + new Date().getTime();

//设置请求方式为get，请求的url，异步提交
xmlHttp.open("GET",true)

4.url转到user_validate.jsp

调用findUserById(userId)方法，根据输入userId查询数据库，返回User或null，如果不为空,说明也存在，提示

String userId = request.getParameter("userId");
if(UserManager.getInstance().findUserById(userId) != null){
	out.println("用户代码已存在！");
}

5. 接到响应，xml.onreadystatechange判断改为最后一个状态，http协议成功200 ，AJax引擎回调，使用匿名函数

//将方法地址复制给onreadystatechange属性
<span style="white-space:pre">	</span>//类似于电话号码
	xmlHttp.onreadystatechange=function(){
		//Ajax引擎状态为成功
		if(xmlHttp.readyState == 4){
			//HTTP协议状态为成功
			if(xmlHttp.status == 200){
				if(trim(xmlHttp.responseText) != ""){
					//alert(xmlHttp.responseText);
					document.getElementById("spanUserId").innerHTML = "<font color='red'>" + xmlHttp.responseText + "</font>";	
				}else{
					document.getElementById("spanUserId").innerHTML = "";
				}
			}else{
				alert("请求失败，错误码=" + xmlHttp.status);
			}
		}
	};
	//将设置信息发送到AJax引擎
	xmlHttp.send(null);
}else{
	document.getElementById("spanUserId").innerHTML = "";
}
}

6 在后面提示span

<span id="spanUserId"></span>

另：避免重复提交

span上提示重复，提交时，为避免重复访问数据库判断，可以在客户端根据spanUserId是否有值，弹出提示框判断

if(document.getElementById("spanUserId").innerHTML != ""){
	alert("用户代码已存在！");
	userIdField.focus();
	return;
}

AJAX验证是否重复

猜你在找的Ajax相关文章