在注册用户的时候,经常看到刚写完用户名就可以验证用户名是否存在的效果。于是我也尝试了一下,写了一个简单的效果。直接上代码:
form.html代码:
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>无标题文档</title> 6 <script type="text/javascript" src="jquery-1.8.3.min.js"></script> 7 <script type="text/javascript" src="ajax.js"></script> 8 <style> 9 #hasName{ 10 font-size:12px; 11 color:red; 12 } 13 </style> 14 </head> 15 16 <body> 17 <form action="" method="post"> 18 用户名:<input type="text" name="username" id="name"/><label id="hasName" ></label> 19 <br> 密码:<input type="password" name="password" /><br> 20 <input type="submit" /> 21 </form> 22 23 <script type="text/javascript"> 24 25 //jquery 版本 26 /* 27 $('#name').blur(function(){ 28 var name = $(this).val(); 29 $.ajax({ 30 url:"index.jsp?name="+name, 31 type:"post", 32 datetype:"text", 33 success: function(date){ 34 $("#hasName").html(date); 35 } 36 }); 37 38 39 }); 40 */ 41 42 //js 版本 43 44 document.getElementById("name").onblur = function(){ 45 var name = this.value; 46 var method = "post"; 47 var url = "index.jsp?name="+name; 48 ajax(url,method,success,failed); 49 50 } 51 function success(date){ 52 document.getElementById("hasName").innerHTML = date; 53 } 54 function failed(){ 55 alert("请求失败!"); 56 } 57 </script> 58 </body> 59 </html>
js的代码直接写在里面了,jquery版本也是可以运行的,还有一个ajax.js的代码如下:
1 function ajax(url,method, fnSucc, fnFaild) 2 { 3 //1.创建Ajax对象 4 if(window.XMLHttpRequest) 5 { 6 var oAjax=new XMLHttpRequest(); 7 } 8 else 9 { 10 var oAjax=new ActiveXObject("Microsoft.XMLHTTP"); 11 } 12 13 //2.连接服务器(打开和服务器的连接) 14 oAjax.open(method, url, true); 15 16 17 //3.发送 18 oAjax.send(); 19 20 //4.接收 21 oAjax.onreadystatechange=function () 22 { 23 if(oAjax.readyState==4) 24 { 25 if(oAjax.status==200) 26 { 27 //alert('成功了:'+oAjax.responseText); 28 fnSucc(oAjax.responseText); 29 } 30 else 31 { 32 //alert('失败了'); 33 if(fnFaild) 34 { 35 fnFaild(); 36 } 37 } 38 } 39 }; 40 }
index.jsp的代码,由于没有连接数据库,所以只有一点如下:
1 String name = String.valueOf(request.getParameter("name")); 2 if(name.equals("wj")){ 3 out.println("用户名已存在"); 4 } 5 else{ 6 out.println("用户名可用"); 7 }