在网页中，很多注册输入框都有实现这个功能。
当你鼠标离开输入框的时候，就会判断该账号是否存在于数据库中，如果存在就会在输入框后输出已拥有该账户，否则显示该用户可用！
JSP:
<html> <head> <base href="<%=basePath%>"> </head> <body> <h3>添加管理账号</h3> <script src="js/jquery-1.8.3.js"></script> <script type="text/javascript"> var xhr; function getXMLHttpRequest(){ if(window.XMLHttpRequest) return new XMLHttpRequest(); } function userInput(txtName){ var userName = txtName.value;//获取文本框的值 $.get("Adminser",{name:userName}, //name:键 userName:值 function(data){ //data表示服务器端返回的数据 if(data == "y"){ $("#span").css("color","#0f0").html("用户名可用"); }else{ $("#span").css("color","red").html("用户名不可用"); } } ); /* $.ajax({ type:"post", //请求方式 url:"Adminser", //连接 data:"name="+name, //数据加载 dataType:"text", //数据类型 success:function(data){ //data表示服务器端返回的数据 if(data == "y"){ $("#span").css("color","#0f0").html("用户名可用"); }else{ $("#span").css("color","red").html("用户名不可用"); } } }); */ /* xhr = getXMLHttpRequest();//调用上面的函数创建对象 //设置回调函数,请求的方式，请求的URl及数据 xhr.onreadystatechange = getResult; //封装请求 xhr.open("GET","Adminser?name="+name,true); //发送请求 xhr.send(null); */ } //回调函数，data表示哦从服务器端返回的数据 /* function getResult(){ var s = document.getElementById("span"); //判断服务器端是否成功返回数据 if(xhr.readyState == 4 && xhr.status == 200){ //接收处理服务端返回的数据 var result = xhr.responseText; if(result == "y"){ s.style.color="#0f0"; s.innerHTML="用户名可用"; }else{ s.style.color="red"; s.innerHTML="用户名不可用"; } } } */ </script> <form action="Adminser" method="post"> <p>用户名：<input type="text" name="name" οnblur="userInput(this)"/><span id="span"></span></p> <p>密 码：<input type="password" name="pwd"/></p> <p><input type="submit" value="注册"/></p> </form> </body> </html> servlet代码： public class Adminser extends HttpServlet { public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //取客户端提交过来的数据 String name = request.getParameter("name"); AdminBiz biz = new AdminBizImpl(); Admin admin = biz.findByName(name); if(admin == null){//等于null表示没有此用户名 response.getWriter().write("y"); }else{ response.getWriter().write("n"); } } public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doGet(request, response); } }
