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

来源：互联网发布：莱芜市宽客网络编辑：程序博客网时间：2024/05/16 19:50

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

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

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" onblur="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);}}

0 0