1.导入JQuery库
2.获取name=”username”的节点：username
3.为username添加change响应函数
3.1 获取username的value属性值，去除前后空格且不为空，准备发送Ajax请求
3.2 发送Ajax请求检验username是否可用
3.3 在服务端直接返回一个html的片段
3.4 在客户端浏览器把其中添加到#message的html中

<script type="text/javascript" src="jScript/jquery-3.2.1.js"></script>
<script type="text/javascript">
    $(function(){
        //为username节点添加change响应函数
        $(":input[name='username']").change(function(){
            //获取username的value属性值
            var val = $(this).val();
            //去除前后空格
            val = $.trim(val);
            if(val != ""){
                //Ajax请求的目标URL
                var url = "valiateUsername";
                //传递的参数
                var args = {"username": val, "time": new Date()};
                //在服务端直接返回一个html的片段
                $.post(url, args, function(data){
                    //在客户端浏览器把其中添加到#message的html中
                    $("#message").html(data);
                });
            }
        });
    });
</script>

<body>
    <form action="" method="post" >
        username: <input type="text" name="username">
        <div id="message"></div>
        <br>
        <input type="submit" value="submit" >
    </form>
</body>

Servlet

public class valiateUsername extends HttpServlet {

    private static final long serialVersionUID = 1L;

    public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        /* Arrays.asList:
        * 将一个数组转化为一个List对象这个方法会返回一个ArrayList类型的对象， 
        * 这个ArrayList类并非java.util.ArrayList类，而是Arrays类的静态内部类！
        * 用这个对象对列表进行添加删除更新操作，就会报UnsupportedOperationException异常。
        */
        List<String> usernames = Arrays.asList("AAA", "BBB", "CCC");

        String username = request.getParameter("username");
        String result = null;

        //String.contains: 判断是否存在包含关系，包含的话就返回true，不包含的话就返回false
        if(usernames.contains(username)){
            result = "<font color='red'>该用户已经被使用</font>";
        }else{
            result = "<font color='green'>该用户可以使用</font>";
        }
        response.setContentType("text/html; charset=UTF-8");

        response.getWriter().print(result);
    }

}

WEB

<servlet>
    <servlet-name>valiateUsername</servlet-name>
    <servlet-class>org.zl.servlet.valiateUsername</servlet-class>
</servlet>

<servlet-mapping>
    <servlet-name>valiateUsername</servlet-name>
    <url-pattern>/valiateUsername</url-pattern>
</servlet-mapping>

Ajax-用户名验证简单例子（详解）

Servlet

WEB

猜你喜欢