ajax异步判断用户名是否重名

ssm的基本配置我就不多说了，直接看代码：

持久层：
[code=java]

public class User {
    private int id;
    private String email;
    private String userName;
    private String password;
    public int getId() {
        return id;
    }
    public void setId(int id) {
        this.id = id;
    }
    public String getEmail() {
        return email;
    }
    public void setEmail(String email) {
        this.email = email;
    }
    public String getUserName() {
        return userName;
    }
    public void setUserName(String userName) {
        this.userName = userName;
    }
    public String getPassword() {
        return password;
    }
    public void setPassword(String password) {
        this.password = password;
    }
    public User(int id, String email, String userName, String password) {
        super();
        this.id = id;
        this.email = email;
        this.userName = userName;
        this.password = password;
    }
    public User() {
        super();
    }
    @Override
    public String toString() {
        return String.format("User [id=%s, email=%s, userName=%s, password=%s]", id, email, userName, password);
    }
[/code]

dao层:
[code=java]
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper
PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">

<mapper namespace="com.zouwt.dao.UserMapper">
   <select id="SelectByEmail" parameterType="String" resultType="com.zouwt.po.User">
         select * from user where email=#{email}
 </select>
  <!--登录-->
<select id="SelectByEmailPass" parameterType="User" resultType="Integer">
        select count(id) from user where email=#{email} and password=#{password}
    </select>
    
    <!-- 查询是否有重名 -->
    <select id="selectUser" parameterType="String" resultType="Integer">
        select count(id) from user where email=#{email}
    </select>
</mapper>
[/code]
Service层:
[code=java]
public interface UserServlet {
    public User SelectByEmail(String email);
    
    public Integer SelectByEmailPass(User user);
    
    public Integer selectUser(String email);             //查询是否存在
}

接口实现：
@Service
public class UserServletImpl implements UserServlet{
    @Autowired
    private UserMapper userMapper;
    
    @Override
    public User SelectByEmail(String email) {
        // TODO Auto-generated method stub
        return userMapper.SelectByEmail(email);
    }

    @Override
    public Integer SelectByEmailPass(User user) {
        // TODO Auto-generated method stub
        return userMapper.SelectByEmailPass(user);
    }

    @Override
    public Integer selectUser(String email) {
        // TODO Auto-generated method stub
        return userMapper.selectUser(email);
    }

}

[/code]
Controller层:
[code=java]
@Controller
public class UserController {
    @Autowired
    private UserServlet userServlet;
    
    @RequestMapping(value="emailCheck",method=RequestMethod.POST)
      public void emailCheck2(String email,User user,HttpServletResponse response,HttpServletRequest request,HttpSession session,Model model) throws IOException{
            response.setContentType("text/html;charset=utf-8");
            PrintWriter out=response.getWriter();
            Integer count = userServlet.selectUser(user.getEmail()); // 获取用户名进行判断数据库中是否存在
            Boolean isPass = (count == 1 ? true : false);
            if(isPass){
                out.println("已经存在该用户");
            }else{
                out.println("可以注册");
            }
             
            out.flush();
            out.close();
             
        }
    
    @RequestMapping(value="passCheck",method=RequestMethod.POST)
    public void emailCheck(User user,HttpServletResponse response,HttpServletRequest request,HttpSession session,Model model) throws IOException{
        response.setContentType("text/html;charset=utf-8");
        PrintWriter out=response.getWriter();
 
        Integer count=userServlet.SelectByEmailPass(user);    //数据库查询到数据之后会返回1，所以可以根据1 来判断是否查询到数据
        Boolean isPass = (count == 1 ? true : false);
        if(isPass){
            out.println("密码正确");
             
        }else{
            out.println("密码错误");
        }
         
        out.flush();
        out.close();
         
    }
     
     @RequestMapping(value="LoginCheck",method=RequestMethod.POST)
     public String LoginCheck(User user,HttpServletResponse response,HttpServletRequest request,Model model){
         Integer count=userServlet.SelectByEmailPass(user);
         Boolean isPass = (count == 1 ? true : false);
         if(isPass==false){
             request.setAttribute("error", "用户名或密码不能为空");
             return "Login";
         }else{
              
             model.addAttribute("user", user);
             return "index";
         }
          
     }
     @RequestMapping(value="Login")
     public String toLogin() {
        return "Login";
        
     }
[/code]
以上就是后台的代码了

前台界面：
login.jsp
[code=html]
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>登录</title>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script>
    function m1() {

        $(document).ready(function() {

            var email = $("#email").val();

            if (email == null || email == "") {
                $("#error1").html("邮箱不能为空");

            } else if (email.indexOf("@") == -1) {
                $("#error1").html("邮箱格式不正确,必须包含@");

            } else if (email.indexOf(".") == -1) {
                $("#error1").html("邮箱格式不正确,必须包含.");
            } else {
                $.post("${pageContext.request.contextPath}/emailCheck.action", {
                    "email" : email
                }, function(data) {
                    $("#error1").html(data);
                }, "text");

            }

        });

    }
    
    function m2(){
        $(document).ready(function(){
            var email=$("#email").val();
            var password=$("#password").val();
            if(password==null||password==""){
                $("#error2").html("密码不能为空");
            }else if(password.length<6){
                $("#error2").html("密码长度不能小于六位");
            }else if(password.length>18){
                $("#error2").html("密码长度已经超过18位，不符合给定要求");
            }else{
                $.post(
                "${pageContext.request.contextPath}/passCheck.action",
                {"email":email,"password":password},
                function(data){
                    $("#error2").html(data);
                },
                "text"                
                );
                
            }
              
        });
    }
    
    
   
</script>

</head>
<body>
    <div align="center">
        <form action="LoginCheck.action" method="post">
           <h2 align="center">${error}</h2>
            <table align="center">
                <tr>
                    <td>Email:<input type="text" name="email" id="email" onblur="m1()"
                        style="width: 200px;" /></td>
                    <td><span id="error1" style="color: red; font-size: 15px;"></span></td>
                </tr>
                <tr>
                    <td>Password:<input type="password" name="password" id="password" onblur="m2()"
                        style="width: 200px;" /></td>
                    <td><span id="error2" style="color: red; font-size: 15px;"></span></td>
                </tr>
                <tr>
                    <td><input type="submit" value="登录" /></td>
                
                </tr>
            </table>
        </form>

    </div>
</body>
</html>
[/code]
需要导入jquery包
index.jsp：
[code=html]
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
        <h2>登录成功!!</h2>
        <span>${user}</span>
</body>
</html>
[/code]

以上就是前台后台的代码了

包结构:
[img=https://img-bbs.youkuaiyun.com/upload/201810/15/1539590901_213418.png][/img]

因为我用的是ssm+Maven项目那些导入包之类的就没有贴出来了，使用ssm基本的包就够了 ，不需要其他的包。

运行效果：
[img=https://img-bbs.youkuaiyun.com/upload/201810/15/1539591213_98578.png][/img]

我数据库有这个数据所以显示的是已经存在

登录成功：
[img=https://img-bbs.youkuaiyun.com/upload/201810/15/1539591342_161366.png][/img]

具体式样就是这些了，前台界面丑陋了一点。