基于ajax及servelt的人事管理系统
前端运用的技术：js，css，html，bootstrap实现页面布局，ajax和json实现将前端数据传到后端。
后端运用技术：java及servelt，通过servelt接受前端数据并将后端数据通过json对象发送给前端。java负责链接数据库，并将数据库数据传给servelt。
系统功能：人事管理系统可以对员工的基本信息进行增删查改。
前端代码：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css"/>
<script src="jquery-3.5.1.min.js"></script>
<script src="bootstrap/js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
<script src="bootstrap/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div style="width:20%;">
<div class="input-group input-group-sm">
<input type="text" class="form-control" id="search" >
<button class="btn btn-success" onclick="searchUser()">查询</button>
<button class="btn btn-success" onclick="allUser()">查询所有用户</button>
<button class="btn btn-success" onclick="openmodal()">修改用户信息</button>
<button class="btn btn-success" onclick="openmodal2()">添加用户信息</button>
</div>
</div>
<div>
<table class="table table-hover" id="table">
<tr>
<td>id</td>
<td>姓名</td>
<td>姓别</td>
<td>年龄</td>
<td>身高</td>
<td>体重</td>
<td>银行卡号</td>
<td>操作</td>
</tr>
<tbody id="tbody">
</tbody>
</table>
</div>
<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" >
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" >
</button>
<h4 class="modal-title" id="myModalLabel">
修改用户信息
</h4>
</div>
<div class="modal-body">
<form class="bs-example bs-example-form" >
<div class="input-group">
<input id="up_id" type="text" class="form-control" placeholder="用户原id">
</div>
<br>
<div class="input-group">
<input id="up_name" type="text" class="form-control" placeholder="姓名">
</div>
<br>
<div class="input-group">
<input id="up_sex" type="text" class="form-control" placeholder="性别">
</div>
<br>
<div class="input-group">
<input id="up_age" type="text" class="form-control" placeholder="年龄">
</div>
<br>
<div class="input-group">
<input id="up_tall" type="text" class="form-control" placeholder="身高">
</div>
<br>
<div class="input-group">
<input id="up_weight" type="text" class="form-control" placeholder="体重">
</div>
<br>
<div class="input-group">
<input id="up_car" type="text" class="form-control" placeholder="卡号">
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal" onclick="hidemodal()">关闭
</button>
<button type="button" class="btn btn-primary" onclick="updateUser()">
提交更改
</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>
<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">
添加用户信息
</h4>
</div>
<div class="modal-body">
<form class="bs-example bs-example-form" role="form">
<div class="input-group">
<input id="add_id" type="text" class="form-control" placeholder="id">
</div>
<br>
<div class="input-group">
<input id="add_name" type="text" class="form-control" placeholder="姓名">
</div>
<br>
<div class="input-group">
<input id="add_sex" type="text" class="form-control" placeholder="性别">
</div>
<br>
<div class="input-group">
<input id="add_age" type="text" class="form-control" placeholder="年龄">
</div>
<br>
<div class="input-group">
<input id="add_tall" type="text" class="form-control" placeholder="身高">
</div>
<br>
<div class="input-group">
<input id="add_weight" type="text" class="form-control" placeholder="体重">
</div>
<br>
<div class="input-group">
<input id="add_car" type="text" class="form-control" placeholder="卡号">
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal" onclick="hidemodal2()">关闭
</button>
<button type="button" class="btn btn-primary" onclick="addUser()">
提交新用户信息
</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>
<script>
function openmodal() {$('#myModal').modal('show');}
function hidemodal() {$('#myModal').modal('hide');}
function updateUser() {
$("#tbody").html('');
var id = $("#up_id").val();
var name = $("#up_name").val();
var age = $("#up_age").val();
var sex = $("#up_sex").val();
var tall = $("#up_tall").val();
var weight = $("#up_weight").val();
var car = $("#up_car").val();
$.ajax({
type : "post",
url : "http://localhost:8080/users_system/update_user",
data:{
"id":id,
"name":name,
"age":age,
"sex":sex,
"tall":tall,
"weight":weight,
"car":car
},
success: function (data){
console.log(data);
addLabel(data.id,data.name,data.age,data.sex,data.tall,data.weight,data.car);
},
error:function () {
alert("ajax erro");
}
});
}
function searchUser()
{
$("#tbody").html('');
var id = $("#search").val().trim();
console.log(id);
$.ajax({
type : "post",
url : "http://localhost:8080/users_system/users",
dataType: "json",
data:{
"id":id,
},
success: function (data){
console.log(data);
for (var i=0;i<data.length;i++){
var user = data[i];
addLabel(user.id,user.name,user.age,user.sex,user.tall,user.weight,user.car);
}
},
error:function () {
console.log('ajax error');
}
});
}
function allUser()
{
$("#tbody").html('');
$.ajax({
type : "post",
url : "http://localhost:8080/users_system/allusers",
success: function (data){
console.log(data);
for (var i=0;i<data.length;i++){
var user = data[i];
addLabel(user.id,user.name,user.age,user.sex,user.tall,user.weight,user.car);
}
},
error:function () {
alert("ajax erro");
}
});
}
function deleteUser()
{
$.ajax({
type : "post",
url : "http://localhost:8080/users_system/delete_user_servelt",
success: function (data){
console.log(data);
},
error:function () {
alert("ajax erro");
}
});
}
window.onload=function(){
allUser();
};
function openmodal2() {$('#myModal2').modal('show');}
function hidemodal2() {$('#myModal2').modal('hide');}
function addUser() {
var id = $("#add_id").val();
var name = $("#add_name").val();
var age = $("#add_age").val();
var sex = $("#add_sex").val();
var tall = $("#add_tall").val();
var weight = $("#add_weight").val();
var car = $("#add_car").val();
$.ajax({
type : "post",
url : "http://localhost:8080/users_system/add_user_servelt",
data:{
"id":id,
"name":name,
"age":age,
"sex":sex,
"tall":tall,
"weight":weight,
"car":car
},
success: function (data){
console.log(data);
addLabel(data.id,data.name,data.age,data.sex,data.tall,data.weight,data.car);
},
error:function () {
alert("ajax erro");
}
});
}
function addLabel(id,name,age,sex,tall,weight,car){
$("#tbody").append("<tr>")
$("#tbody").append("<td>"+id+"</td>");
$("#tbody").append("<td>"+name+"</td>");
$("#tbody").append("<td>"+age+"</td>");
$("#tbody").append("<td>"+sex+"</td>");
$("#tbody").append("<td>"+tall+"</td>");
$("#tbody").append("<td>"+weight+"</td>");
$("#tbody").append("<td>"+car+"</td>");
$("#tbody").append('<td>'+'<button class="btn-danger" value='+id+'>删除</button><button class="btn btn-success" value='+id+'>修改</button>'+'</td></tr>');
}
</script>
</body>
</html>后端代码：
实体类：
package users_system;
public class user {
int id;
String name;
String sex;
int age;
int tall;
int weight;
String car;
public user() {
super();
}
public user(int id, String name, String sex, int age, int tall, int weight, String car) {
super();
this.id = id;
this.name = name;
this.sex = sex;
this.age = age;
this.tall = tall;
this.weight = weight;
this.car = car;
}
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getSex() {
return sex;
}
public void setSex(String sex) {
this.sex = sex;
}
public int getAge() {
return age;
}
public void setAge(int age) {
this.age = age;
}
public int getTall() {
return tall;
}
public void setTall(int tall) {
this.tall = tall;
}
public int getWeight() {
return weight;
}
public void setWeight(int weight) {
this.weight = weight;
}
public String getCar() {
return car;
}
public void setCar(String car) {
this.car = car;
}
}
负责在数据库查找用户信息的类：
package users_system;
import java.sql.DriverManager;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import com.mysql.jdbc.Connection;
import com.mysql.jdbc.PreparedStatement;
public class select_user {
public ArrayList<user> select_user_meth(int id) {
Connection conn=null;
PreparedStatement pstat=null;
ArrayList<user> list=new ArrayList<>();
String driver = "com.mysql.jdbc.Driver";
//URL指向要访问的数据库名mysql
String url = "jdbc:mysql://localhost:3306/user?useSSL=false&serverTimezone=UTC&characterEncoding=utf8";
//MySQL配置时用户名
String user1 = "root";
//MySQL配置时的密码
String password = "123456";
try {
Class.forName(driver); //加载驱动程序
conn=(Connection) DriverManager.getConnection(url, user1, password);//获取数据库链接
String sql="select * from users where id="+id;
pstat=(PreparedStatement) conn.prepareStatement(sql); //创建prepareStatement类对象，用来执行SQL语句
ResultSet rs=pstat.executeQuery();
if(rs.next()) {
int id2=rs.getInt(1);
String name=rs.getString(2);
String sex=rs.getString(3);
int age=rs.getInt(4);
int tall=rs.getInt(5);
int weight=rs.getInt(6);
String car=rs.getString(7);
user user=new user(id2,name,sex,age,tall,weight,car);
list.add(user);
}
pstat.close();
conn.close();
return list;
}catch(ClassNotFoundException e) {
System.out.println("加载驱动异常!");
e.printStackTrace();
} catch(SQLException e) {
System.out.println("获取连接异常!");
e.printStackTrace();
}catch (Exception e) {
// TODO: handle exception
e.printStackTrace();
}
return list;
}
public ArrayList<user> select_alluser_meth() {
Connection conn=null;
PreparedStatement pstat=null;
ArrayList<user> list=new ArrayList<>();
String driver = "com.mysql.jdbc.Driver";
//URL指向要访问的数据库名mysql
String url = "jdbc:mysql://localhost:3306/user?useSSL=false&serverTimezone=UTC&characterEncoding=utf8";
//MySQL配置时用户名
String user1 = "root";
//MySQL配置时的密码
String password = "123456";
try {
Class.forName(driver); //加载驱动程序
conn=(Connection) DriverManager.getConnection(url, user1, password);//获取数据库链接
String sql="select * from users ";
pstat=(PreparedStatement) conn.prepareStatement(sql); //创建prepareStatement类对象，用来执行SQL语句
ResultSet rs=pstat.executeQuery();
while(rs.next()) {
int id2=rs.getInt(1);
String name=rs.getString(2);
String sex=rs.getString(3);
int age=rs.getInt(4);
int tall=rs.getInt(5);
int weight=rs.getInt(6);
String car=rs.getString(7);
user user=new user(id2,name,sex,age,tall,weight,car);
list.add(user);
}
pstat.close();
conn.close();
return list;
}catch(ClassNotFoundException e) {
System.out.println("加载驱动异常!");
e.printStackTrace();
} catch(SQLException e) {
System.out.println("获取连接异常!");
e.printStackTrace();
}catch (Exception e) {
// TODO: handle exception
e.printStackTrace();
}
return list;
}
}
负责向数据库增加用户的类：
package users_system;
import java.sql.DriverManager;
import java.sql.SQLException;
import com.mysql.jdbc.Connection;
import com.mysql.jdbc.PreparedStatement;
public class add_user {
public user add_user_meth(int id, String name, String sex, int age, int tall, int weight, String car_number) {
user user = null;
Connection conn=null;
PreparedStatement pstat=null;
String driver = "com.mysql.jdbc.Driver";
//URL指向要访问的数据库名mysql
String url = "jdbc:mysql://localhost:3306/user?useSSL=false&serverTimezone=UTC&characterEncoding=utf8";
//MySQL配置时用户名
String user1 = "root";
//MySQL配置时的密码
String password = "123456";
try {
Class.forName(driver); //加载驱动程序
conn=(Connection) DriverManager.getConnection(url, user1, password);//获取数据库链接
String sql="insert into users (id,name,sex,age,tall,weight,car_number) values ("+id+","+name+","+sex+","+age+","+tall+","+weight+","+car_number+")";
pstat=(PreparedStatement) conn.prepareStatement(sql); //创建prepareStatement类对象，用来执行SQL语句
int i=pstat.executeUpdate();
if(i!=0) {
user=new user( id, name, sex, age, tall, weight, car_number);
}
pstat.close();
conn.close();
return user;
}catch(ClassNotFoundException e) {
System.out.println("加载驱动异常!");
e.printStackTrace();
} catch(SQLException e) {
System.out.println("获取连接异常!");
e.printStackTrace();
}catch (Exception e) {
// TODO: handle exception
e.printStackTrace();
}
return user;
}
}
负责向数据库更新用户信息的类：
package users_system;
import java.sql.DriverManager;
import java.sql.SQLException;
import com.mysql.jdbc.Connection;
import com.mysql.jdbc.PreparedStatement;
public class update_user {
public user update_user_meth(int id, String name, String sex, int age, int tall, int weight, String car_number) {
user user = null;
Connection conn=null;
PreparedStatement pstat=null;
String driver = "com.mysql.jdbc.Driver";
//URL指向要访问的数据库名mysql
String url = "jdbc:mysql://localhost:3306/user?useSSL=false&serverTimezone=UTC&characterEncoding=utf8";
//MySQL配置时用户名
String user1 = "root";
//MySQL配置时的密码
String password = "123456";
try {
Class.forName(driver); //加载驱动程序
conn=(Connection) DriverManager.getConnection(url, user1, password);//获取数据库链接
String sql="update users set name="+name+",age="+age+",sex="+sex+",tall="+tall+",weight="+weight+",car_number="+car_number+" where id="+id;
pstat=(PreparedStatement) conn.prepareStatement(sql); //创建prepareStatement类对象，用来执行SQL语句
int i=pstat.executeUpdate();
if(i!=0) {
user=new user( id, name, sex, age, tall, weight, car_number);
}
pstat.close();
conn.close();
return user;
}catch(ClassNotFoundException e) {
System.out.println("加载驱动异常!");
e.printStackTrace();
} catch(SQLException e) {
System.out.println("获取连接异常!");
e.printStackTrace();
}catch (Exception e) {
// TODO: handle exception
e.printStackTrace();
}
return user;
}
}
负责从数据库删除用户信息的类：
package users_system;
import java.sql.DriverManager;
import java.sql.SQLException;
import com.mysql.jdbc.Connection;
import com.mysql.jdbc.PreparedStatement;
public class delete_user {
public boolean delete_user_meth(int id) {
Connection conn=null;
PreparedStatement pstat=null;
String driver = "com.mysql.jdbc.Driver";
//URL指向要访问的数据库名mysql
String url = "jdbc:mysql://localhost:3306/user?useSSL=false&serverTimezone=UTC&characterEncoding=utf8";
//MySQL配置时用户名
String user1 = "root";
//MySQL配置时的密码
String password = "123456";
try {
Class.forName(driver); //加载驱动程序
conn=(Connection) DriverManager.getConnection(url, user1, password);//获取数据库链接
String sql="DELETE FROM users where id="+id;
pstat=(PreparedStatement) conn.prepareStatement(sql); //创建prepareStatement类对象，用来执行SQL语句
int i=pstat.executeUpdate();
if(i==0) return false;
pstat.close();
conn.close();
return true;
}catch(ClassNotFoundException e) {
System.out.println("加载驱动异常!");
e.printStackTrace();
} catch(SQLException e) {
System.out.println("获取连接异常!");
e.printStackTrace();
}catch (Exception e) {
// TODO: handle exception
e.printStackTrace();
}
return false;
}
}
返回用户信息给前端的servelt：
package users_system;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
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 com.alibaba.fastjson.JSON;
import users_system.select_user;
import users_system.user;
/**
* Servlet implementation class users
*/
@WebServlet("/users")
public class search_users extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public search_users() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
response.getWriter().append("Served at: ").append(request.getContextPath());
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
response.setCharacterEncoding("utf-8");
response.setContentType("application/json; charset=utf-8");
String id =request.getParameter("id");
int id2=Integer.valueOf(id);
select_user select=new select_user();
PrintWriter writer = response.getWriter();
ArrayList<user> user=select.select_user_meth(id2);
String jsonStr = JSON.toJSONString(user);
writer.write(jsonStr);
}
}
返回新增用户信息的servelt：
package users_system;
import java.io.IOException;
import java.io.PrintWriter;
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 com.alibaba.fastjson.JSON;
/**
* Servlet implementation class add_user_servelt
*/
@WebServlet("/add_user_servelt")
public class add_user_servelt extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public add_user_servelt() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
response.getWriter().append("Served at: ").append(request.getContextPath());
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
response.setCharacterEncoding("utf-8");
response.setContentType("application/json; charset=utf-8");
String id =request.getParameter("id");
String name =request.getParameter("name");
String sex =request.getParameter("sex");
String age =request.getParameter("age");
String tall =request.getParameter("tall");
String weight =request.getParameter("weight");
String car =request.getParameter("car");
int id2=Integer.valueOf(id);
int age2=Integer.valueOf(age);
int tall2=Integer.valueOf(tall);
int weight2=Integer.valueOf(weight);
add_user add=new add_user();
PrintWriter writer = response.getWriter();
user user=add.add_user_meth(id2, name, sex, age2, tall2, weight2, car);
String jsonStr = JSON.toJSONString(user);
writer.write(jsonStr);
}
}
负责将更新的用户信息返回给前端得servelt：
package users_system;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
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 com.alibaba.fastjson.JSON;
/**
* Servlet implementation class update_user
*/
@WebServlet("/update_user")
public class update_user_servelt extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public update_user_servelt() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
response.getWriter().append("Served at: ").append(request.getContextPath());
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
response.setCharacterEncoding("utf-8");
response.setContentType("application/json; charset=utf-8");
String id =request.getParameter("id");
String name =request.getParameter("name");
String sex =request.getParameter("sex");
String age =request.getParameter("age");
String tall =request.getParameter("tall");
String weight =request.getParameter("weight");
String car =request.getParameter("car");
int id2=Integer.valueOf(id);
int age2=Integer.valueOf(age);
int tall2=Integer.valueOf(tall);
int weight2=Integer.valueOf(weight);
update_user update=new update_user();
PrintWriter writer = response.getWriter();
user user=update.update_user_meth(id2, name, sex, age2, tall2, weight2, car);
String jsonStr = JSON.toJSONString(user);
writer.write(jsonStr);
}
}
负责将前端指定的用户信息删除并返回结果：
package users_system;
import java.io.IOException;
import java.io.PrintWriter;
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 com.alibaba.fastjson.JSON;
/**
* Servlet implementation class delete_user_servelt
*/
@WebServlet("/delete_user_servelt")
public class delete_user_servelt extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public delete_user_servelt() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
response.getWriter().append("Served at: ").append(request.getContextPath());
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
response.setCharacterEncoding("utf-8");
response.setContentType("application/json; charset=utf-8");
String id =request.getParameter("id");
int id2=Integer.valueOf(id);
delete_user delete=new delete_user();
PrintWriter writer = response.getWriter();
boolean bu=delete.delete_user_meth(id2);
String jsonStr = JSON.toJSONString(bu);
writer.write(jsonStr);
}
}
185
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
