奈寻味导航网 » 文章资讯 » 利用Ajax检测用户名是否被占用的完整实例

利用Ajax检测用户名是否被占用的完整实例

2023-07-08 18:09:06 309

适合人群：Ajax和jQuery入门

采用Ajax实现用户名验证

使用jQuery给出提示信息

用户注册的时候，使用Ajax实现检测用户名是否已经被注册过，很多细节没有实现，给大家做个简单普及。

<%@pagelanguage="java"contentType="text/html;charset=utf-8"
pageEncoding="utf-8"%>




用户注册页面


	varxmlHttp;
	functioncreateXMLHttpRequest(){
		if(window.XMLHttpRequest){
			xmlHttp=newXMLHttpRequest();
		}elseif(window.ActiveXObject){
			xmlHttp=newActiveXObject("Microsoft.XMLHttp");
		}
	}
	functionvalidate(account){
		createXMLHttpRequest();
		xmlHttp.open("Get","ValidateServlet?account="+account,true);
		xmlHttp.onreadystatechange=callback;
		xmlHttp.send(null);
	}
	functioncallback(){
		if(xmlHttp.readyState==4){
				if(xmlHttp.status==200){
					vartext=xmlHttp.responseText;
					if(text=="true"){
						//document.getElementById("msg").innerHTML="该手机号已经被注册过";
						$("#msg").text("该手机号已经被注册");
						$("#sub").attr("disabled","true");//添加disabled属性，让按钮不可用
					}else{
						//document.getElementById("msg").innerHTML="";
						$("#msg").text("");
						$("#sub").removeAttr("disabled");//移除disabled属性，让按钮可用
						
					}
				}else{
					alert("请求失败，错误码="+xmlHttp.status);
				}
		}
	}
	functioncheckInfo(){
		varaccount=$("#account").val();
		varpwd1=$("#pwd1").val();
		varpwd2=$("#pwd2").val();
		if(account==""||account==null){
			$("#msg").text("账号不能为空");
			$("#sub").attr("disabled","true");
			returnfalse;
		}
		if(pwd1==""||pwd1==null||pwd2==""||pwd2==null||pwd1!=pwd2){
			$("#info").text("密码不能为空或者两次密码不一致");
			$("#sub").attr("disabled","true");
			returnfalse;
		}
		$("#msg").text("");
		$("#info").text("");
		$("#sub").removeAttr("disabled");
	}
	functionsubmit(){
		checkInfo();
		$("#reg").submit();
	}





账号：
请输入手机号

密码：

确认密码：

下面是ValidateServlet模拟实现，没有做真正的数据库表数据检测，大家自行完成。

packagecom.ambow.servlet;

importjava.io.IOException;
importjava.io.PrintWriter;

importjavax.servlet.ServletException;
importjavax.servlet.annotation.WebServlet;
importjavax.servlet.http.HttpServlet;
importjavax.servlet.http.HttpServletRequest;
importjavax.servlet.http.HttpServletResponse;

@WebServlet("/ValidateServlet")
publicclassValidateServletextendsHttpServlet{
	privatestaticfinallongserialVersionUID=1L;
publicValidateServlet(){
super();
}
	protectedvoiddoGet(HttpServletRequestrequest,HttpServletResponseresponse)throwsServletException,IOException{
		PrintWriterpw=response.getWriter();
		Stringaccount=request.getParameter("account");
		System.out.println("account"+account);
		if("123".equals(account)){
			pw.print("true");
		}else{
			pw.print("false");
		}
	}
	protectedvoiddoPost(HttpServletRequestrequest,HttpServletResponseresponse)throwsServletException,IOException{
		doGet(request,response);
	}
}

到此这篇关于利用Ajax检测用户名是否被占用的文章就介绍到这了,更多相关Ajax检测用户名被占用内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票！

返回顶部
3162201930
czq8825@qq.com

利用Ajax检测用户名是否被占用的完整实例

热门推荐

随机推荐