首页 > 代码库 > 使用ajax验证用户名重复

使用ajax验证用户名重复

2024-07-04 12:12:46   230人阅读

　　继上次的用户注册登录案例之后，对其中的部分功能再做进一步改进。上一版中用户提交表单后才对用户名进行校验，虽然做了回显，但还是感觉功能弱了些。为了能有更好用户体验，不是在用户提交表单后才给提示，而是在用户输入用户名后就立即对该用户名进行数据库校验，经过晚上的测试现在可以使用纯js版和jquery版。
　　准备工作，先编写好验证用户名重复的后台Servlet程序，然后在jsp或html中使用js对用户名进行验证，当用户输入用户名文本框推动焦点时立即触发验证。
下面是jquery代码。

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>

<% out.clear(); %><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>使用ajax进行异步验证</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <style type="text/css">
        body{ font-size:12px;}
        table{ font-size:12px;}
        table input{ width:120px;}
        table em{ color:#ff0000;}
        #body{ margin-left:200px; margin-top:220px;}
    </style>
    <script type="text/javascript" src="Jquery/jquery-1.7.2.min.js"></script>
    <script language="javascript" type="text/javascript">
        $(document).ready(function(){
            $("#username").focus();
        });
        var hadoop = function(){
            // 异步验证用户是否重复
            if($.trim($("#username").val())==""){
                $("#message").html("用户名不能为空");
                $("#username").focus();
            }else{
                $.ajax({
                    type: "post",
                    url: "dumplicate.do",
                    data: "username=" + $("#username").val(),
                    success: function(message){
                        $("#message").html(message);
                    }
                });
            }
        };
    </script>
  </head>
  <body>
      <div id="body">
        <form action="#" method="post">
            <table>
                <tr>
                    <td>用户名：</td><td><input type="text" id="username" name="username" onblur="hadoop()" />
                    </td>
                    <td>
                        <em id="message"></em>
                    </td>
                </tr>
                <tr>
                    <td>密码：</td><td colspan="2"><input type="text" /></td>
                </tr>
            </table>
        </form>
    </div>
  </body>
</html>

下面是js版代码。

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>

<% out.clear(); %><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>使用ajax进行异步验证</title>
    <meta http-equiv="content-type" content="text/xml;charset=utf-8" />
    <style type="text/css">
        body{ font-size:12px;}
        table{ font-size:12px;}
        table input{ width:120px;font-size:12px;}
        table em{ color:#ff0000;}
        .tips{ text-align:right;}
        #body{ margin-left:200px; margin-top:220px;}
    </style>
    <script language="javascript" type="text/javascript">
        window.onload=function(){
            document.getElementById("username").focus();
        };
        var xmlhttp;
        function hadoop() {
            // 1.创建XMLHttpRequest对象  
            if (window.XMLHttpRequest) {
                // IE7,IE8,FireFox,Mozilla,Safari,Opera  
                xmlhttp = new XMLHttpRequest();
                if (xmlhttp.overrideMimeType) {
                    xmlhttp.overrideMimeType("text/xml");
                }
            } else if (window.ActiveXObject) {
                // IE6,IE5.5,IE5  
                var activexName = [ "MSXML2.XMLHTTP", "Miscrosoft.XMLHTTP" ];
                for ( var i = 0; i < activexName.length; i++) {
                    try {
                        xmlhttp = new ActiveXObject(activexName[i]);
                        break;
                    } catch (e) {
                    }
                }
            }
            if (xmlhttp == undefined || xmlhttp == null) {
                alert(‘当前浏览器不支持创建XMLHttpRequest对象‘);
                return;
            }
    
            //2.注册回调函数
            xmlhttp.onreadystatechange = callback;
            // 注意方法调用后面不加括号
            //xmlhttp.onreadystatechange = callback();  
    
            // 获取文本框中输入的内容，经过两次编码防止中文乱码
            // 后台使用URLDecoder.decode(username,"utf-8")对username解码 
            var userName = document.getElementById("username").value;
            if(userName==""){
                document.getElementById("message").innerHTML="用户名不能为空";
                $("#username").focus();
                return;
            }
            userName = encodeURI(encodeURI(userName));
            // 3.设置和服务器端交互参数  
            xmlhttp.open("POST", "${pageContext.request.contextPath }/dumplicate.do?username=" + userName, true);
    
            // 4.设置向服务器端发送的数据，启动和服务器端的交互  
            xmlhttp.send(null);
        }
    
        function callback() {
            // 5 .判断和服务器端的交互是否完成，还要判断服务器端是否正确返回了数据  
            if (xmlhttp.readyState == 4) {
                // 表示和服务器端的交互已经完成  
                if (xmlhttp.status == 200) {
                    // 表示服务器的响应代码是200，正确的返回了数据  
                    // 纯文本数据的接受方法  
                    var message = xmlhttp.responseText;
                    // XML数据对应的DOM对象的接受方法  
                    // 使用的前提是，服务器端需要设置content-type为text/xml  
                    // var domXml = xmlhttp.responseXML;  
    
                    //向div标签中填充文本内容的方法  
                    var div = document.getElementById("message");
                    if(message=="用户名已被注册"){
                        document.getElementById("username").focus();
                        document.getElementById("username").select();
                    }
                    div.innerHTML = message;
                }
            }
        }
    </script>
  </head>
  <body>
      <div id="body">
        <form action="#" method="post">
            <table>
                <tr>
                    <td class="tips">用户名：</td>
                    <td>
                        <input type="text" id="username" name="username" value="祁连山" onblur="hadoop()" />
                    </td>
                    <td>
                        <em id="message">*</em>
                    </td>
                </tr>
                <tr>
                    <td class="tips">密码：</td><td colspan="2"><input type="text" /></td>
                </tr>
            </table>
        </form>
    </div>
  </body>
</html>

　　从上面的代码量就可以看出来jquery的强大之处了，所以有空没空多看看jquery，自己会用才是王道。在这里也感谢一位网名叫牛腩的广西南宁朋友提供js版本，jquery版本出自jquery文档，看来还是得多看文档哪。


联系
我们