异步提交表单以及代码实现

异步提交表单

在此使用异步提交表单是为了获取服务器响应的数据。因为我们前台使用的是html作为视图层，

不能够直接从servlet相关的域对象获取值 ，只能通过ajax获取响应数据

register.html页面：

        <script>
            /*
                表单校验：
                    1、用户名：单词字符，长度8到20位
　　                2、密码：单词字符，长度8到20位
　　                3、email：邮件格式
　　                4、姓名：非空
　　                5、手机号：手机号格式
　　                6、出生日期：非空
　　                7、验证码：非空
             */
            //校验用户名
            function checkUsername() {
                //1、获取用户名
                var usernmae = $("#username").val();
                //2、定义正则
                var reg_username = /^\w{8,20}$/;
                //判断给出提示信息
                var flag = reg_username.test(usernmae);
                if (flag){
                    //用户名合法
                    $("#username").css("border","");
                } else {
                    //用户名非法
                    $("#username").css("border","1px solid red");
                }
                return flag;

            }
            //校验密码
            function checkPassword(){
                //1、获取用户名
                var password = $("#password").val();
                //2、定义正则
                var reg_password = /^\w{8,20}$/;
                //判断给出提示信息
                var flag = reg_password.test(password);
                if (flag){
                    //用户名合法
                    $("#password").css("border","");
                } else {
                    //用户名非法
                    $("#password").css("border","1px solid red");
                }
                return flag;
            }
            //校验邮箱
            function checkEmail(){
                //1、获取邮箱
                var email = $("#email").val();
                //定义规则
                var reg_email = /^\w+@\w+\.\w+$/;
                //判断
                var flag = reg_email.test(email);
                if (flag){
                    $("#email").css("border","");
                }else {
                    $("#email").css("border","1px solid red");
                }
                return flag;
            }

            $(function () {
                $("#registerForm").submit(function () {
                    //发送数据到服务器
                    if (checkUsername() && checkPassword() && checkEmail()){
                        //校验通过发送ajax请求，提交表单的数据
                        $.post("registUserServlet",$(this).serialize(),function (data) {
                            //处理服务器响应的数据
                            
                        });
                    }
                    return false;
                });

                $("#username").blur(checkUsername);
                $("#password").blur(checkPassword);
                $("#email").blur(checkEmail);
            })
        </script>

 

 

 

 

 

 

 

Servlet代码实现

RegistUserServlet：

@WebServlet("/registUserServlet")
public class RegistUserServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //1、获取数据
        Map<String, String[]> map = request.getParameterMap();
        //2、封装对象
        User user = new User();
        try {
            BeanUtils.populate(user,map);
        } catch (IllegalAccessException e) {
            e.printStackTrace();
        } catch (InvocationTargetException e) {
            e.printStackTrace();
        }
        //3、调用service完成注册
        UserService service = new UserServiceImpl();
        boolean flag = service.regist(user);
        //4、响应结果
        ResultInfo info = new ResultInfo();
        if (flag){
            //注册成功
            info.setFlag(true);
        }else {
            //注册失败
            info.setFlag(false);
            info.setErrorMsg("注册失败");
        }
        //将info对象序列化为json
        ObjectMapper mapper = new ObjectMapper();
        String string = mapper.writeValueAsString(info);
        //将json数据写回客户端
        //设置content-type
        response.setContentType("application/json;charset=utf-8");
        response.getWriter().write(string);

    }

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

 

Dao代码实现

UserDao接口：

public interface UserDao {

    /**
     * 根据用户名查询用户信息
     * @param username
     * @return
     */
    public User findByUsername(String username);

    /**
     * 用户保存
     * @param user
     */
    public void save(User user);
}

UserDaoImpl实现类：

public class UserDaoImpl implements UserDao {
    private JdbcTemplate template = new JdbcTemplate(JDBCUtils.getDataSource());

    @Override
    public User findByUsername(String username) {
        User user = null;
        try {
            //定义sql
            String sql = "select * from tab_user where username = ?";
            //执行sql
            user = template.queryForObject(sql, new BeanPropertyRowMapper<>(User.class), username);
        } catch (Exception e) {
            
        }
        return user;
    }

    @Override
    public void save(User user) {
        //1、定义sql
        String sql = "insert into tab_user(username,password,name,birthday,sex,telephone,email) values(?,?,?,?,?,?,?)";
        //2、执行sql
        template.update(sql,user.getUsername(),user.getPassword(),user.getName(),user.getBirthday()
                        ,user.getSex(),user.getTelephone(),user.getEmail());

    }
}

 

 

 

 

service代码实现

UserService接口：

public interface UserService {

    boolean regist(User user);
}

UserServiceImpl实现类：

public class UserServiceImpl implements UserService {
    private UserDao userDao = new UserDaoImpl();
    /**
     * 注册用户
     * @param user
     * @return
     */
    @Override
    public boolean regist(User user) {
        //根据用户名查询用户对象
        User u = userDao.findByUsername(user.getUsername());
        //判断u是否为null
        if (u!=null){
            //用户吗已存在，注册失败
            return false;
        }
        //保存用户信息
        userDao.save(user);
        return true;
    }
}