AJAX验证是否重复

前端之家收集整理的这篇文章主要介绍了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;
}
原文链接:https://www.f2er.com/ajax/161877.html

猜你在找的Ajax相关文章