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

异步提交表单

在此使用异步提交表单是为了获取服务器响应的数据，因为我们前台使用的是html作为视图层，不能够直接从servlet相关的域对象获取值，只能通过ajax获取响应数据

register.html页面：

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

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

                return flag;
            }

            //校验邮箱
            function checkEmail() {
                //1.获取邮箱
                let email = $("#email").val();
                //2.定义正则
                var reg_email = /^\w+@\w+\.\w+$/;

                //3.判断
                let flag = reg_email.test(email);
                if (flag){
                    //真
                    $("#email").css("border","");
                }else {
                    //假
                    $("#email").css("border","1px solid red");
                }
                return flag;
            }



            $(function () {
                $("#registerForm").submit(function () {
                    //1.发送数据到服务器
                    if (checkUsername && checkPassword && checkEmail()){
                        //校验通过，发送ajax请求，提交表单数据  username=zhangsan&&password=123

                        $.post("regisUserServlet",$(this).serialize(),function (data){// serialize:序列化为（username=zhangsan&&password=123）格式
                            //处理服务器响应的数据 data
                        });
                    }
                    //2.跳转页面
                    return false;
                    //如果这个方法没有返回值，或者返回为true，则表单提交，如果返回为false，则表单不提交
                });

                //当某一个组件失去焦点是，调用对应的校验方法
                $("#username").blur(checkUsername);
                $("#password").blur(checkPassword);
                $("#email").blur(checkEmail);
            });
        </script>

serlvet代码实现

RegistUserServlet：

package cn.itcast.travel.web.servlet;

import cn.itcast.travel.domain.ResultInfo;
import cn.itcast.travel.domain.User;
import cn.itcast.travel.service.UserService;
import cn.itcast.travel.service.impl.UserServiceImpl;
import com.fasterxml.jackson.databind.ObjectMapper;
import org.apache.commons.beanutils.BeanUtils;

import javax.imageio.ImageIO;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.awt.*;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.lang.reflect.InvocationTargetException;
import java.util.Map;
import java.util.Random;

/**
 * 验证码
 */
@WebServlet("/registUserServlet")
public class RegistUserServlet extends HttpServlet {
    public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {
        this.doPost(request,response);
    }
    public 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);//把map集合中数据封装到user属性中
        } catch (IllegalAccessException e) {
            e.printStackTrace();
        } catch (InvocationTargetException e) {
            e.printStackTrace();
        }

        //3.调用service完成注册
        UserService service = new UserServiceImpl();
        boolean flag  = service.regist(user);//完成注册操作

        ResultInfo info = new ResultInfo();
        //4.响应结果
        if (flag){
            //注册成功
            info.setFlag(true);
        }else {
            //注册失败
            info.setFlag(false);
            info.setErrorMsg("注册失败!");
        }

        //将info对象序列化为json
        ObjectMapper mapper = new ObjectMapper();
        String json = mapper.writeValueAsString(info);

        //将json数据写回客户端
        //设置content-type
        response.setContentType("application/json;charset=utf-8");
        response.getWriter().write(json);//字符流输出
    }
}

Dao代码实现

UserDao

package cn.itcast.travel.dao;

import cn.itcast.travel.domain.User;

public interface UserDao {

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


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

UserDaoImpl

package cn.itcast.travel.dao.impl;

import cn.itcast.travel.dao.UserDao;
import cn.itcast.travel.domain.User;
import cn.itcast.travel.util.JDBCUtils;
import org.springframework.dao.DataAccessException;
import org.springframework.jdbc.core.BeanPropertyRowMapper;
import org.springframework.jdbc.core.JdbcTemplate;

public class UserDaoImpl implements UserDao {

    //创建一个工具类
    private JdbcTemplate template = new JdbcTemplate(JDBCUtils.getDataSource());//(JDBCUtils.getDataSource())：获取连接池对象

    @Override
    public User findByUsername(String username) {
        User user = null;
        try {
            //1.定义sql
            String sql  = "select * from tab_user where username = ?";

            //2.执行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) value(?,?,?,?,?,?,?)";

        //2.执行sql
        template.update(sql, user.getUsername(),
                user.getPassword(),
                user.getName(),
                user.getBirthday(),
                user.getSex(),
                user.getTelephone(),
                user.getEmail());

    }
}

service代码实现

UserService

package cn.itcast.travel.service;

import cn.itcast.travel.domain.User;

public interface UserService {
    boolean regist(User user);
}

UserServiceImpl

package cn.itcast.travel.service.impl;

import cn.itcast.travel.dao.UserDao;
import cn.itcast.travel.dao.impl.UserDaoImpl;
import cn.itcast.travel.domain.User;
import cn.itcast.travel.service.UserService;

public class UserServiceImpl implements UserService {

    private UserDao userDao = new UserDaoImpl();

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