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

适合人群:Ajax和jQuery入门

采用Ajax实现用户名验证

使用jQuery给出提示信息

用户注册的时候,使用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 src="https://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>  <script type="text/javascript">  	var xmlHttp;  	function createXMLHttpRequest(){  		if(window.XMLHttpRequest){  			xmlHttp = new XMLHttpRequest();  		}else if(window.ActiveXObject){  			xmlHttp = new ActiveXObject("Microsoft.XMLHttp");  		}  	}  	function validate(account){  		createXMLHttpRequest();  		xmlHttp.open("Get","ValidateServlet?account="+account,true);  		xmlHttp.onreadystatechange = callback;  		xmlHttp.send(null);  	}  	function callback(){  		if(xmlHttp.readyState==4){  				if(xmlHttp.status==200){  					var text = 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);  				}  		}  	}  	function checkInfo(){  		var account = $("#account").val();  		var pwd1 = $("#pwd1").val();  		var pwd2 = $("#pwd2").val();  		if(account==""||account==null){  			$("#msg").text("账号不能为空");  			$("#sub").attr("disabled","true");  			return false;  		}  		if(pwd1==""||pwd1==null||pwd2==""||pwd2==null||pwd1!=pwd2){  			$("#info").text("密码不能为空或者两次密码不一致");  			$("#sub").attr("disabled","true");  			return false;  		}  		$("#msg").text("");  		$("#info").text("");  		$("#sub").removeAttr("disabled");  	}  	function submit(){  		checkInfo();  		$("#reg").submit();  	}     </script>  </head>  <body>  <form id="reg" name="reg" action="RegisterServlet" method="post">  账号:<input type="text" name="account" id="account" onblur="validate(this.value);">  <span id="msg" style="color:red">请输入手机号</span><br>  密码:<input type="password" id="pwd1" name="password1" onblur="checkInfo();"><br>  确认密码:<input type="password" id="pwd2" name="password2" onblur="checkInfo();">  <span id="info" style="color:red"></span><br>  <input type="button" id="sub" value="提交" onclick="submit();">  </form>  </body>  </html>

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

  package com.ambow.servlet;     import java.io.IOException;  import java.io.PrintWriter;     import javax.servlet.ServletException;  import javax.servlet.annotation.WebServlet;  import javax.servlet.http.HttpServlet;  import javax.servlet.http.HttpServletRequest;  import javax.servlet.http.HttpServletResponse;     @WebServlet("/ValidateServlet")  public class ValidateServlet extends HttpServlet {  	private static final long serialVersionUID = 1L;   public ValidateServlet() {    super();    }  	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {  		PrintWriter pw = response.getWriter();  		String account = request.getParameter("account");  		System.out.println("account"+account);  		if("123".equals(account)) {  			pw.print("true");  		}else {  			pw.print("false");  		}  	}  	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {  		doGet(request, response);  	}  }

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

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

郑重声明:本网站发布的内容(图片、视频和文字)以及用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服

发表评论

登录后才能评论