异步提交表单
在此使用异步提交表单是为了获取服务器响应的数据。因为我们前台使用的是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 false;
}
}
标签：username,异步,表单,public,flag,User,提交,email,user From： https://www.cnblogs.com/xjw12345/p/16616055.html