JavaWeb案例1:注册用户名检测

案例说明

实现一个可以异步获取用户名是否被注册的小案例。如:
在这里插入图片描述

在这里插入图片描述

  • 1.编写Html与js:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Login</title>
    <script src="/jqueryWeb/js/jquery-3.3.1.js"></script>
    <script>
        $(function () {
            $("#username").on("blur",function () {
                $.ajax({
                    url : "/jqueryWeb/checkUsername",
                    data : "username="+$("#username").val(),
                    dataType : "json" ,
                    type : "post",
                    success : function (data) {
                        if(data.code == 1){
                            $("#msg").css("color","green");
                        }else {
                            $("#msg").css("color","red");
                        }
                        $("#msg").css("display","inline")
                        $("#msg").text(data.msg);
                    },
                    error: function () {
                        alert("服务器发生了错误");
                    }
                })
            });

        });
    </script>
</head>
<body>
    <form action="#" method="post">
        <input id="username" name="username" type="text" placeholder="注册用户名"/><br>
        <label id="msg" style="display: none"></label><br>
        <input id="paw" name="paw" type="password" placeholder="密码"><br>
        <br>
        <input type="submit" value="提交"/>
    </form>
</body>
</html>
  • 2.定义消息的实体类
public class Result {
    public static Result NO_REGISTER = new Result(1,"恭喜,可以注册! ");
    public static Result ALREADY_REGISTER = new Result(0, "已经被注册了,请换一个用户名!");
    private int Code;
    private String msg;
    public Result() {
    }
    public Result(int code, String msg) {
        Code = code;
        this.msg = msg;
    }
    //get,set方法
 )
    1. 编写Servlet
@WebServlet("/checkUsername")
public class LoginController extends javax.servlet.http.HttpServlet {
    private List<String> list;
    @Override
    public void init(ServletConfig config) throws ServletException {
    //模拟已经被注册的用户名
        list = new ArrayList<String>();
        list.add("zhangsan");
        list.add("lisi");
        list.add("wangwu");
        list.add("zhaoliu");

    }
    protected void doPost(javax.servlet.http.HttpServletRequest request, javax.servlet.http.HttpServletResponse response) throws javax.servlet.ServletException, IOException {
        String username = request.getParameter("username");
        Result result = null;
        if(list.contains(username)){
            result = Result.ALREADY_REGISTER;
        }else{
            result = Result.NO_REGISTER;
        }
        response.setContentType("text/html;charset=utf-8");
        response.getWriter().println(new ObjectMapper().writeValueAsString(result));

    }

    protected void doGet(javax.servlet.http.HttpServletRequest request, javax.servlet.http.HttpServletResponse response) throws javax.servlet.ServletException, IOException {
        doPost(request,response);
    }
}

效果:
在这里插入图片描述
在这里插入图片描述

©️2020 CSDN 皮肤主题: 1024 设计师:上身试试 返回首页