前面我们做了一个AJAX练习,就是验证用户名是否存在,现在回到我们的图书管理系统,来写一个如何验证邮箱是否存在的。还是接着之前图书管理后台和前台这个项目,现在是在register.jsp的页面的邮箱验证。
1.项目环境准备
之前我们是在一个单独的AJAX web项目里做的用户名是否存在的验证,现在我们需要把js中获取创建XMLHttpRequest对象的js代码复制过来。这个图书管理系统中有一个js的文件夹,而且下有一个myJS.js,里面也有一段创建XMLHttpRequest对象的代码。
2.Register.jsp引入myJS.js并写checkEmail()方法
2.1表单找到email,添加onblur事件
编辑器打开register.jsp文件,大概在38 39行位置对name=email这个修改代码如下。
<input type="text" class="textinput"
name="email" onblur="checkEmail()"/></td>
2.2 checkEmail()代码
在register.jsp 17 18行写这个checkEmail()方法。
// 验证邮箱是否存在
function checkEmail() {
// 得到用户输入的邮箱
var email = document.getElementsByName("email")[0];
var xhr = getXMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
if(xhr.status == 200){//查看服务器响应状态
// 得到font标签内容
var font = document.getElementsByTagName("font")[0];
if(xhr.responseText == "true"){
font.innerHTML="邮箱已被使用";
font.style.color = "red";
}else {
font.innerHTML="邮箱可以使用";
font.style.color = "green";
}
}
}
}
xhr.open("get", "${pageContext.request.contextPath}/checkEmailServlet?email=" + email.value);
xhr.send(null);
}
3.Dao层代码
这开始我们由于要和数据库交互,所以麻烦。我们得先创建一个用户表,我这里用小海豚工具快速创建了一个users表,里面填充两条数据。
3.1创建User这个Bean类
我们前面只有Book和PageBean这两个Bean类,这里来添加一个User.java
根据数据库表字段名称,我们来写User.java的代码
package com.anthony.domain;
public class User {
private int id;
private String username;
private String password;
private String email;
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
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 String getEmail() {
return email;
}
public void setEmail(String email) {
this.email = email;
}
}
3.2 UserDao.java
先创建两个空的java文件,然后分别写代码。
以下是完整的UserDao.java代码
package com.anthony.dao;
import java.sql.SQLException;
import com.anthony.domain.User;
public interface UserDao {
/**
* 根据email查找用户
* @param email
* @return
* @throws SQLException
*/
public User findUserByEmail(String email) throws SQLException;
}
3.3 UserDaoImpl.java
package com.anthony.dao;
import java.sql.SQLException;
import org.apache.commons.dbutils.QueryRunner;
import org.apache.commons.dbutils.handlers.BeanHandler;
import com.anthony.datasource.C3P0Utils;
import com.anthony.domain.User;
public class UserDaoImpl implements UserDao {
@Override
public User findUserByEmail(String email) throws SQLException {
QueryRunner qr = new QueryRunner(C3P0Utils.getDataSource());
User user = qr.query("select * from users where email=?", new BeanHandler<User>(User.class),email);
return user;
}
}
4. Service层代码
上面完成了表的创建和Dao层的代码,开始写业务逻辑的代码,先创建下面两个文件。
接口文件的代码如下
package com.anthony.service;
import com.anthony.domain.User;
public interface UserService {
public User findUserByEmail(String email);
}
具体实现的代码如下
package com.anthony.service;
import java.sql.SQLException;
import com.anthony.dao.UserDao;
import com.anthony.dao.UserDaoImpl;
import com.anthony.domain.User;
public class UserServiceImpl implements UserService {
// 创建一个Dao层对象
UserDao ud = new UserDaoImpl();
@Override
public User findUserByEmail(String email) {
try {
return ud.findUserByEmail(email);
} catch (SQLException e) {
e.printStackTrace();
}
return null;
}
}
下面开始创建Servlet和写Servlet的代码。
5. Servlet代码
创建一个CheckEmailServlet.java的文件,url映射是/checkEmailServlet
package com.anthony.web.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.anthony.domain.User;
import com.anthony.service.UserService;
import com.anthony.service.UserServiceImpl;
public class CheckEmailServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
//1. 拿到参数
String email = request.getParameter("email");
// 根据email去查找用户
UserService us = new UserServiceImpl();
User user = us.findUserByEmail(email);
PrintWriter out = response.getWriter();
//判断邮箱是否存在
if ( user != null) {
out.print("true");
}else {
out.print("false");
}
}
public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
}
下面开始部署tomcat,重启服务
6. 部署测试
浏览器打开http://localhost:8080/BookManagement/register.jsp
邮箱输入框输入 tom@163.com, 看看效果
邮箱输入tony@126.com, 看看效果