我们一般使用的都是form表单提交到Servlet来实现前端和后端的交互的。这次我使用的是ajax提交数据，实现登录操作。

首先我们需要的是一套layui模板，这里用到layui的js和css界面。

第一步自己建立数据表，这里只需要username 和password。我使用的是主要使用的是mysql。

这边是我的工程目录，来看一下我的目录结构吧。

这里就主要写一下servlet和前端html的交互。

Servlet

login.java

package com.Serlvet;

import com.Bean.User;
import com.Dao.mannger;
import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
import java.io.IOException;
import java.io.PrintWriter;

@WebServlet(name ="login", value = "/login")
public class login extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

}  
@Override  
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {  
    String action=request.getParameter("action");//action'是html传来的一个字段  
    if(action.equals("doLogin")){  
        doLogin(request,response);  
    }  
}  

protected void doLogin(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");//设置相应的文本类型
response.setContentType("text/html;charset=utf-8");//设置响应类型,并防止中文乱码
String username = request.getParameter("username");
String password = request.getParameter("password");
String fangshi = request.getParameter("fangshi");
mannger dao = new mannger();//dao层对象
User student = new User();//实体类对象
User admin = new User();//实体类对象
student.setUsername(username);//获取前端传来的数据
student.setPassword(password);
admin.setUsername(username);
admin.setPassword(password);
int i = 0;
if ("0".equals(fangshi)) { //判断登录方式
i = dao.loginstu(student); //执行登录操作
if (i==0) {
request.setAttribute("msg", "用户名或者密码错误");
System.out.println("用户名或者密码错误");
response.getWriter().print("error"); //响应ajax的data值，
} else {
System.out.println("ok");
response.getWriter().print("ok");//响应ajax的data值，成功则进响应到前端
request.getSession().setAttribute("student", student.getUsername());
System.out.println("登陆成功");
}
}
else if ("1".equals(fangshi)) {
i = dao.loginadmin(admin);
System.out.println(i);
if (i == 0) {
request.setAttribute("msg", "用户名或者密码错误");
System.out.println("用户名或者密码错误");
response.getWriter().print("error"); //响应ajax的data值，
} else {
System.out.println("ok");
response.getWriter().print("ok");//响应ajax的data值，成功则进响应到前端
request.getSession().setAttribute("student", student.getUsername());
System.out.println("登陆成功");
}
}
}
}

dao层，这个代码是封装的一些进行数据库操作的方法。

mannger.java

package com.Dao;
import com.Bean.User;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import com.Util.utils;
public class mannger {
public int registerstu(User stu){
int i=0;
try {
Connection connection = utils.getConnection();
String sql = "insert into stuuser(username,password,email,name,tel,gender,birthday) values(?,?,?,?,?,?,?)";
PreparedStatement ps = null;
ps = connection.prepareStatement(sql);
ps.setString(1,stu.getUsername());
ps.setString(2, stu.getPassword());
ps.setString(3,stu.getEmail());
ps.setString(4,stu.getName());
ps.setString(5, stu.getTel());
ps.setString(6, stu.getGengder());
ps.setString(7, stu.getBirthday());
i = ps.executeUpdate();
} catch (ClassNotFoundException e) {
e.printStackTrace();
} catch (SQLException e) {
e.printStackTrace();
}
return i;
}
public int registeradimn(User admin){
int i=0;
try {
Connection connection = utils.getConnection();
String sql = "insert into adminuser(username,password,email,name,tel,gender,birthday) values(?,?,?,?,?,?,?)";
PreparedStatement ps = null;
ps = connection.prepareStatement(sql);
ps.setString(1,admin.getUsername());
ps.setString(2, admin.getPassword());
ps.setString(3,admin.getEmail());
ps.setString(4,admin.getName());
ps.setString(5, admin.getTel());
ps.setString(6, admin.getGengder());
ps.setString(7, admin.getBirthday());
i = ps.executeUpdate();
} catch (ClassNotFoundException e) {
e.printStackTrace();
} catch (SQLException e) {
e.printStackTrace();
}
return i;
}
public int loginstu(User stu){
int i = 1;
try {
Connection connection = utils.getConnection();
String sql="select * from stuuser where username=? and password=?";
PreparedStatement ps = null;
ps = connection.prepareStatement(sql);
ps.setString(1,stu.getUsername());
ps.setString(2, stu.getPassword());
ResultSet rs = ps.executeQuery();
if(rs.next()==false){
i = 0;
}
rs.close();
ps.close();
connection.close();
} catch (ClassNotFoundException e) {
e.printStackTrace();
} catch (SQLException e) {
e.printStackTrace();
}
return i;
}
public int loginadmin(User admin){
int i = 1;
try {
Connection connection = utils.getConnection();
String sql="select * from adminuser where username=? and password=?";
PreparedStatement ps = null;
ps = connection.prepareStatement(sql);
ps.setString(1,admin.getUsername());
ps.setString(2, admin.getPassword());
ResultSet rs = ps.executeQuery();
if(rs.next()==false){
i = 0;
}
rs.close();
ps.close();
connection.close();
} catch (ClassNotFoundException e) {
e.printStackTrace();
} catch (SQLException e) {
e.printStackTrace();
}
return i;
}
}

下面是界面

login.html

实现效果

如果有什么问题，欢迎交流！欢迎交流！欢迎交流！