当鼠标离开输入框判断数据是否存在 onblur ajax 火推

最新推荐文章于 2023-05-07 16:04:19 发布

qq1350048638

最新推荐文章于 2023-05-07 16:04:19 发布

阅读量3.1k

点赞数 1

分类专栏： javase教程

javase教程专栏收录该内容

21 篇文章 0 订阅

订阅专栏

当鼠标离开输入框判断数据是否存在

在网页中，很多注册输入框都有实现这个功能。

当你鼠标离开输入框的时候，就会判断该账号是否存在于数据库中，如果存在就会在输入框后输出已拥有该账户，否则显示该用户可用！

JSP:

[html]view plaincopy 
    
 <span style="color:#009900;"><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" onblur="userInput(this)"/><span id="span"></span></p>  
         <p>密 码：<input type="password" name="pwd"/></p>  
         <p><input type="submit" value="注册"/></p>  
     </form>  
   </body>  
 </html></span>  

servlet代码：

[java]view plaincopy 
    
 <span style="color:#009900;">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);  
     }  
   
 }</span>  

qq1350048638

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
当鼠标离开输入框判断数据是否存在 onblur ajax 火推

当鼠标离开输入框判断数据是否存在在网页中，很多注册输入框都有实现这个功能。当你鼠标离开输入框的时候，就会判断该账号是否存在于数据库中，如果存在就会在输入框后输出已拥有该账户，否则显示该用户可用！JSP:[html] view plain copyspan style="color:#009900
复制链接

扫一扫

专栏目录