JSP+Servlet+Ajax实现用户增删改查的例子

一、数据库设计

用户表User

已有的测试数据

二、Java代码编写

Java EE的架构一般分为以下五层：

①.Domain

②.DAO

③.Service

④.Controller

⑤.View

这里的项目结构如下：

使用的环境为：JDK1.8+Servlet3.0+Tomcat8.0

前端统一使用Ajax方式和JSON数据格式向后端发送请求及数据，后端统一返回JSON数据格式的信息

1.Domain层

 package domain;

 import java.util.Date;

 public class User {

     public User() {

     }

     private Integer id;

     private String account;

     private String password;

     private String name;

     private String info;

     private Date createTime;

     private Date modifiedTime;

     public Integer getId() {
         return id;
     }

     public void setId(Integer id) {
         this.id = id;
     }

     public String getAccount() {
         return account;
     }

     public void setAccount(String account) {
         this.account = account;
     }

     public String getPassword() {
         return password;
     }

     public void setPassword(String password) {
         this.password = password;
     }

     public String getName() {
         return name;
     }

     public void setName(String name) {
         this.name = name;
     }

     public String getInfo() {
         return info;
     }

     public void setInfo(String info) {
         this.info = info;
     }

     public Date getCreateTime() {
         return createTime;
     }

     public void setCreateTime(Date createTime) {
         this.createTime = createTime;
     }

     public Date getModifiedTime() {
         return modifiedTime;
     }

     public void setModifiedTime(Date modifiedTime) {
         this.modifiedTime = modifiedTime;
     }

     @Override
     public String toString() {
         return "User [id=" + id + ", account=" + account + ", password=" + password + ", name=" + name + ", info="
                 + info + ", createTime=" + createTime + ", modifiedTime=" + modifiedTime + "]";
     }

 }

User.java

2.Dao层

 package dao;

 import java.util.List;

 import domain.User;

 public interface UserDao {

     /** 显示所有用户 */
     public List<User> listAll();

     /** 添加一个用户 */
     public boolean add(User user);

     /** 根据id删除一个用户 */
     public boolean deleteById(Integer id);

     /** 更新一个用户 */
     public boolean update(User user);

     /** 根据id查找一个用户 */
     public User getById(Integer id);

 }

UserDao.java

 package dao.impl;

 import java.sql.Connection;
 import java.sql.PreparedStatement;
 import java.sql.ResultSet;
 import java.sql.SQLException;
 import java.util.ArrayList;
 import java.util.List;

 import dao.UserDao;
 import domain.User;
 import util.DBUtil;

 public class UserDaoImpl implements UserDao {

     @Override
     public List<User> listAll() {
         List<User> users = new ArrayList<User>();
         Connection conn = DBUtil.getConnection();
         String sql = "select * from user";
         try {
             PreparedStatement pst = conn.prepareStatement(sql);
             ResultSet rst = pst.executeQuery();
             while (rst.next()) {
                 User user = new User();
                 user.setId(rst.getInt("id"));
                 user.setAccount(rst.getString("account"));
                 user.setPassword(rst.getString("password"));
                 user.setName(rst.getString("name"));
                 user.setInfo(rst.getString("info"));
                 user.setCreateTime(rst.getTimestamp("gmt_create"));
                 user.setModifiedTime(rst.getTimestamp("gmt_modified"));
                 users.add(user);
             }
             rst.close();
             pst.close();
         } catch (SQLException e) {
             e.printStackTrace();
         }
         return users;
     }

     @Override
     public boolean add(User user) {
         Connection conn = DBUtil.getConnection();
         String sql = "insert into user(account, password, name, info) value (?, ?, ?, ?)";
         try {
             PreparedStatement pst = conn.prepareStatement(sql);
             pst.setString(1, user.getAccount());
             pst.setString(2, user.getPassword());
             pst.setString(3, user.getName());
             pst.setString(4, user.getInfo());
             int count = pst.executeUpdate();
             pst.close();
             return count > 0 ? true : false;
         } catch (SQLException e) {
             e.printStackTrace();
         }
         return false;
     }

     @Override
     public boolean deleteById(Integer id) {
         Connection conn = DBUtil.getConnection();
         String sql = "delete from user where id = ?";
         try {
             PreparedStatement pst = conn.prepareStatement(sql);
             pst.setInt(1, id);
             int count = pst.executeUpdate();
             pst.close();
             return count > 0 ? true : false;
         } catch (SQLException e) {
             e.printStackTrace();
         }
         return false;
     }

     @Override
     public boolean update(User user) {
         Connection conn = DBUtil.getConnection();
         String sql = "update user set account = ?, password = ?, name = ?, info = ? where id = ?";
         try {
             PreparedStatement pst = conn.prepareStatement(sql);
             pst.setString(1, user.getAccount());
             pst.setString(2, user.getPassword());
             pst.setString(3, user.getName());
             pst.setString(4, user.getInfo());
             pst.setInt(5, user.getId());
             int count = pst.executeUpdate();
             pst.close();
             return count > 0 ? true : false;
         } catch (SQLException e) {
             e.printStackTrace();
         }
         return false;
     }

     @Override
     public User getById(Integer id) {
         User user = new User();
         Connection conn = DBUtil.getConnection();
         String sql = "select * from user where id = ?";
         try {
             PreparedStatement pst = conn.prepareStatement(sql);
             pst.setInt(1, id);;
             ResultSet rst = pst.executeQuery();
             while (rst.next()) {
                 user.setId(rst.getInt("id"));
                 user.setAccount(rst.getString("account"));
                 user.setPassword(rst.getString("password"));
                 user.setName(rst.getString("name"));
                 user.setInfo(rst.getString("info"));
                 user.setCreateTime(rst.getTimestamp("gmt_create"));
                 user.setModifiedTime(rst.getTimestamp("gmt_modified"));
             }
             rst.close();
             pst.close();
         } catch (SQLException e) {
             e.printStackTrace();
         }
         return user;
     }

 }

UserDaoImpl.java

3.Service层

 package service;

 import java.util.List;

 import domain.User;

 public interface UserService {

     /** 显示所有用户 */
     public List<User> listAll();

     /** 添加一个用户 */
     public boolean add(User user);

     /** 根据id删除一个用户 */
     public boolean deleteById(Integer id);

     /** 更新一个用户 */
     public boolean update(User user);

     /** 根据id查找一个用户 */
     public User getById(Integer id);

 }

UserService.java

 package service.impl;

 import java.util.List;

 import dao.UserDao;
 import dao.impl.UserDaoImpl;
 import domain.User;
 import service.UserService;

 public class UserServiceImpl implements UserService {

     @Override
     public List<User> listAll() {
         UserDao userDao = new UserDaoImpl();
         return userDao.listAll();
     }

     @Override
     public boolean add(User user) {
         UserDao userDao = new UserDaoImpl();
         return userDao.add(user);
     }

     @Override
     public boolean deleteById(Integer id) {
         UserDao userDao = new UserDaoImpl();
         return userDao.deleteById(id);
     }

     @Override
     public boolean update(User user) {
         UserDao userDao = new UserDaoImpl();
         return userDao.update(user);
     }

     @Override
     public User getById(Integer id) {
         UserDao userDao = new UserDaoImpl();
         return userDao.getById(id);
     }

 }

UserServiceImpl.java

4.Controller层

 package controller;

 import java.io.IOException;
 import java.util.List;

 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 domain.User;
 import net.sf.json.JSONArray;
 import net.sf.json.JSONObject;
 import service.UserService;
 import service.impl.UserServiceImpl;
 import util.JSONUtil;

 @WebServlet("/UserServlet")
 public class UserServlet extends HttpServlet {

     private static final long serialVersionUID = 1L;

     public UserServlet() {
         super();
     }

     protected void doGet(HttpServletRequest request, HttpServletResponse response)
             throws ServletException, IOException {
         // 设置返回编码格式，解决中文乱码
         response.setCharacterEncoding("utf-8");

         // 根据action的值来执行不同的动作，例如显示所有用户或显示单个用户
         String action = request.getParameter("action");

         // 显示所有用户
         if (action.equals("listAll")) {
             UserService userService = new UserServiceImpl();
             List<User> users = userService.listAll();

             // 返回JSON数据格式
             JSONArray jsonArr = JSONArray.fromObject(users);
             JSONObject jsonObjOut = new JSONObject();
             jsonObjOut.put("users", jsonArr);
             JSONUtil.returnJSON(request, response, jsonObjOut);
         }

         // 显示单个用户
         if (action.equals("getById")) {
             int id = Integer.parseInt(request.getParameter("id"));
             UserService userService = new UserServiceImpl();
             User user = userService.getById(id);

             // 返回JSON数据格式
             JSONObject jsonObjOut = new JSONObject();
             jsonObjOut.put("user", user);
             JSONUtil.returnJSON(request, response, jsonObjOut);
         }
     }

     protected void doPost(HttpServletRequest request, HttpServletResponse response)
             throws ServletException, IOException {
         // 获取JSON数据
         JSONObject jsonObjIn = JSONUtil.getJSON(request, response);

         User user = new User();
         user.setAccount(jsonObjIn.getString("account"));
         user.setPassword(jsonObjIn.getString("password"));
         user.setName(jsonObjIn.getString("name"));
         user.setInfo(jsonObjIn.getString("info"));

         UserService userService = new UserServiceImpl();
         boolean isSuccess = userService.add(user);

         // 返回JSON数据格式
         JSONObject jsonObjOut = new JSONObject();
         jsonObjOut.put("isSuccess", isSuccess);
         JSONUtil.returnJSON(request, response, jsonObjOut);
     }

     protected void doDelete(HttpServletRequest request, HttpServletResponse response)
             throws ServletException, IOException {
         // 获取JSON数据
         JSONObject jsonObjIn = JSONUtil.getJSON(request, response);
         int id = jsonObjIn.getInt("id");

         UserService userService = new UserServiceImpl();
         boolean isSuccess = userService.deleteById(id);

         // 返回JSON数据格式
         JSONObject jsonObjOut = new JSONObject();
         jsonObjOut.put("isSuccess", isSuccess);
         JSONUtil.returnJSON(request, response, jsonObjOut);

     }

     protected void doPut(HttpServletRequest request, HttpServletResponse response)
             throws ServletException, IOException {
         // 获取JSON数据
         JSONObject jsonObjIn = JSONUtil.getJSON(request, response);

         User user = new User();
         user.setId(jsonObjIn.getInt("id"));
         user.setAccount(jsonObjIn.getString("account"));
         user.setPassword(jsonObjIn.getString("password"));
         user.setName(jsonObjIn.getString("name"));
         user.setInfo(jsonObjIn.getString("info"));

         UserService userService = new UserServiceImpl();
         boolean isSuccess = userService.update(user);

         // 返回JSON数据格式
         JSONObject jsonObjOut = new JSONObject();
         jsonObjOut.put("isSuccess", isSuccess);
         JSONUtil.returnJSON(request, response, jsonObjOut);
     }

 }

UserServlet.java

5.View层

 <%@ page language="java" contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"%>
 <% String basePath = request.getScheme() + "://" + request.getServerName() + ":"
   + request.getServerPort() + request.getContextPath() + "/"; %>

 <!Doctype html>
 <html>
 <head>
   <base href="<%=basePath%>">
   <title>用户管理</title>
   <meta charset="utf-8">
   <link rel="stylesheet" href="static/css/style.css">
   <link rel="stylesheet" href="static/js/jquery-ui/jquery-ui.min.css">
   <script src="static/js/jquery-3.3.1.min.js"></script>
   <script src="static/js/jquery.serializejson.min.js"></script>
   <script src="static/js/jquery-ui/jquery-ui.min.js"></script>
 </head>
 <body>
   <!-- 用户列表 -->
   <div class="tbl-title">用户列表</div>
   <button onclick="showAddUserModal()">添加新的用户</button>
   <table id="users" class="tbl-list">
     <thead>
       <tr>
         <th>账户</th>
         <th>密码</th>
         <th>用户名</th>
         <th>信息</th>
         <th>操作</th>
       </tr>
     </thead>
     <tbody>
     </tbody>
   </table>

   <!-- 添加用户模态框 -->
   <div id="add-user-modal" title="添加用户" style="display:none;">
     <form id="add-user-form">
       <table class="modal-tbl">
         <tr><td>账户</td><td><input type="text" name="account"></td></tr>
         <tr><td>密码</td><td><input type="password" name="password"></td></tr>
         <tr><td>姓名</td><td><input type="text" name="name"></td></tr>
         <tr><td>信息</td><td><input type="text" name="info"></td></tr>
       </table>
     </form>
   </div>

   <!--删除用户对话模态框 -->
   <div id="delete-user-modal" title="删除用户" style="display:none;">
     <p>确定删除该用户吗？</p>
   </div>

   <!-- 更新用户模态框 -->
   <div id="update-user-modal" title="更新用户" style="display:none;">
     <form id="update-user-form">
       <table class="modal-tbl">
         <tr style="display: none"><td>ID</td><td><input type="text" name="id"></td></tr>
         <tr><td>账户</td><td><input type="text" name="account"></td></tr>
         <tr><td>密码</td><td><input type="password" name="password"></td></tr>
         <tr><td>姓名</td><td><input type="text" name="name"></td></tr>
         <tr><td>信息</td><td><input type="text" name="info"></td></tr>
       </table>
     </form>
   </div>

   <!-- 提示信息模态框 -->
   <div id="msg-modal" title="" style="display:none">
     <p></p>
   </div>

   <script>
   // 开始
   $(function() {
     listAllUser();
   });

   // 显示所有用户
   function listAllUser() {
     $.ajax({
       type: "GET",
       url: "UserServlet?action=listAll",
       dataType: "json",
       success: function(data) {
         $("#users tbody").empty();  // 每次载入前先清空显示区域，防止数据重复显示
         var users = data.users;
         for (var i in users) {
           var user = users[i];
           var userStr = JSON.stringify(user);
           $("#users tbody").append('<tr><td>' + user.account + '</td>'
             + '<td>' + user.password + '</td>'
             + '<td>' + user.name + '</td>'
             + '<td>' + user.info + '</td>'
             + '<td><button onclick=\'showUpdateUserModal(' + userStr + ')\'>更新</button>&nbsp;'
             + '<button onclick="deleteUser(' + user.id + ')">删除</button></td></tr>');
         }
       },
       error: function() {
         console.log("ajax error");
       }
     });
   }

   // 显示添加用户模态框
   function showAddUserModal() {
     $("#add-user-form")[0].reset();  // 每次载入前先清空表单，防止显示之前的信息
     $("#add-user-modal").dialog({
       resizable: false,
       modal: true,
       buttons: {
         "提交": function() {
           addUser();
         },
         "取消": function() {
           $(this).dialog("close");
         },
       },
     });
   }

   // 添加用户
   function addUser() {
     // 获取序列化表单信息
     var user = $("#add-user-form").serializeJSON();
     var userStr = JSON.stringify(user);

     $.ajax({
       type: "POST",
       url: "UserServlet",
       data: userStr,
       dataType: "json",
       success: function(data) {
         if (data.isSuccess) {
           $("#add-user-modal").dialog("close");
           showMsg('添加成功！');
           listAllUser();
         } else {
           $("#add-user-modal").dialog("close");
           showMsg('添加失败！');
           listAllUser();
         }
       },
       error: function() {
         console.log("ajax error");
       },
     });
   }

   // 删除用户
   function deleteUser(id) {
     // 将id封装为JSON格式数据
     var data = {};
     data.id = id;
     var dataStr = JSON.stringify(data);
     // 显示删除用户模态框
     $("#delete-user-modal").dialog({
       resizable: false,
       modal: true,
       buttons: {
         "确认": function() {
           $.ajax({
             type: "DELETE",
             url: "UserServlet",
             data: dataStr,
             dataType: "json",
             success: function(data) {
               if (data.isSuccess) {
                 $("#delete-user-modal").dialog("close");
                 showMsg('删除成功！');
                 listAllUser();
               } else {
                 $("#delete-user-modal").dialog("close");
                 showMsg('删除失败！');
                 listAllUser();
               }
             },
             error: function() {
               console.log("ajax error");
             },
           });
         },
         "取消": function() {
           $(this).dialog("close");
         },
       },
     });
   }

   //显示更新用户模态框
   function showUpdateUserModal(user) {
     $("#update-user-form")[0].reset();  // 每次载入前先清空表单，防止显示之前的信息
     // 表单赋值
     $("#update-user-form input[name='id']").val(user.id);
     $("#update-user-form input[name='account']").val(user.account);
     $("#update-user-form input[name='password']").val(user.password);
     $("#update-user-form input[name='name']").val(user.name);
     $("#update-user-form input[name='info']").val(user.info);

     $("#update-user-modal").dialog({
       resizable: false,
       modal: true,
       buttons: {
         "提交": function() {
           updateUser();
         },
         "取消": function() {
           $(this).dialog("close");
         },
       },
     });
   }

   // 更新用户
   function updateUser() {
     // 获取序列化表单信息
     var user = $("#update-user-form").serializeJSON();
     var userStr = JSON.stringify(user);

     $.ajax({
       type: "PUT",
       url: "UserServlet",
       data: userStr,
       contentType: 'application/json;charset=utf-8',
       dataType: "json",
       success: function(data) {
         if (data.isSuccess) {
           $("#update-user-modal").dialog("close");
           showMsg('更新成功！');
           listAllUser();
         } else {
           $("#update-user-modal").dialog("close");
           showMsg('更新失败！');
           listAllUser();
         }
       },
       error: function() {
         console.log("ajax error");
       },
     });
   }

   //显示提示信息
   function showMsg(text) {
     $("#msg-modal p").text(''); // 每次载入前先清空显示区域，防止显示之前的信息
     $("#msg-modal p").text(text);
     $("#msg-modal").dialog({
       modal: true,
     });
     // 2s后消失
     setTimeout(function() {
       $("#msg-modal").dialog("close")
     },2000);
   }
   </script>
 </body>
 </html>

admin_user.jsp

 @charset "utf-8";

 .tbl-title {
   margin: 10px 0;
   font-size: 24px;
 }

 .tbl-list {
   margin: 10px 0;
   border: 1px solid #000000;
   border-collapse: collapse;
 }

 .tbl-list th, .tbl-list td {
   padding: 5px;
   border: 1px solid #000000;
 }

 .modal-tbl{}

style.css

js相关下载：

链接：https://pan.baidu.com/s/1W1gaJmxAtfHfJ-cYklz4_g
提取码：ubt0

6.工具类

 package util;

 import java.sql.Connection;
 import java.sql.DriverManager;

 public class DBUtil {

     private static String Driver = "com.mysql.jdbc.Driver";
     private static String url = "jdbc:mysql://localhost:3306/demo?useUnicode=true&characterEncoding=utf8";
     private static String user = "root";
     private static String psd = "123456";
     private static Connection conn = null;

     // 连接数据库
     public static Connection getConnection() {
         if (conn == null) {
             try {
                 Class.forName(Driver);
                 conn = DriverManager.getConnection(url, user, psd);
                 System.out.println("开始数据库连接");
             } catch (Exception e) {
                 e.printStackTrace();
             }
         }
         return conn;
     }

     // 关闭数据库连接
     public static void CloseConnection() {
         if (conn != null) {
             try {
                 conn.close();
                 System.out.println("关闭数据库连接");
             } catch (Exception e) {
                 e.printStackTrace();
             }
         }
     }
 }

DBUtil.java

 package util;

 import java.io.BufferedReader;
 import java.io.IOException;
 import java.io.PrintWriter;

 import javax.servlet.ServletException;
 import javax.servlet.http.HttpServletRequest;
 import javax.servlet.http.HttpServletResponse;

 import net.sf.json.JSONObject;

 public class JSONUtil {

     // 从输入流中获取JSON数据
     public static JSONObject getJSON (HttpServletRequest request, HttpServletResponse response)
             throws ServletException, IOException {
         // 输入流
         StringBuffer sb = new StringBuffer();
         String line = null;
         BufferedReader br = request.getReader();
         while ((line = br.readLine()) != null) {
             sb.append(line);
         }
         // 返回JSONObject
         String jsonStr = sb.toString();
         JSONObject jsonObj = JSONObject.fromObject(jsonStr);
         return jsonObj;
     }

     // 返回JSON格式的数据
     public static void returnJSON (HttpServletRequest request, HttpServletResponse response, JSONObject jsonObj)
             throws ServletException, IOException {
         // 设置编码格式，解决乱码
         response.setCharacterEncoding("utf-8");  

         PrintWriter out = response.getWriter() ;
         out.write(jsonObj.toString());
         out.flush();
         out.close();
     }

 }

JSONUtil.java

7.所需要的jar

百度云下载地址：https://pan.baidu.com/s/1Uq2A11PDBJkoLmIqJQDRLQ

提取码：f1gu

三、实现效果

1.显示所有用户

2.添加用户

3.修改用户

4.删除用户