1200字范文 > Bootstrap4+MySQL前后端综合实训-Day07-AM【ajax局部刷新——(单个/批量)删除用户按钮

Bootstrap4+MySQL前后端综合实训-Day07-AM【ajax局部刷新——(单个/批量)删除用户按钮

时间：2023-05-17 11:36:51

【Bootstrap4前端框架+MySQL数据库】前后端综合实训【10天课程博客汇总表详细笔记】【附：实训所有代码】

目录

(单个/批量)删除用户按钮的实现、更新用户信息按钮的实现——展示

DeleteUserServlet.java

SelectUserByIdServlet.java

UpdateUserServlet.java

user_manager.html

(单个/批量)删除用户按钮的实现、更新用户信息按钮的实现——展示

批量删除用户：
单个删除用户：
更新用户信息：

DeleteUserServlet.java

package com.newcapec.servlet;import java.io.IOException;import java.sql.SQLException;import java.util.Arrays;import java.util.HashMap;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 com.newcapec.dao.UserInfoDao;/*** Servlet implementation class DeleteUserServlet*/@WebServlet(name = "/DeleteUserServlet", urlPatterns = "/DeleteUserServlet")public class DeleteUserServlet extends HttpServlet {private static final long serialVersionUID = 1L;private UserInfoDao userInfoDao = new UserInfoDao();/*** @see HttpServlet#HttpServlet()*/public DeleteUserServlet() {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 stubresponse.getWriter().append("Served at: ").append(request.getContextPath());}/*** @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse*response)*/protected void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {// 此处可以使用过滤器批量处理request.setCharacterEncoding("utf-8");response.setContentType("text/json;charset=utf-8");String[] userIds = request.getParameterValues("userIds[]");// 使用userInfoDao执行批量删除int[] ids = new int[userIds.length];for (int i = 0; i < userIds.length; i++) {ids[i] = Integer.valueOf(userIds[i]);}try {boolean flag = userInfoDao.batchDeleteById(ids);HashMap<String, Boolean> result = new HashMap<>();result.put("flag", flag);response.getWriter().write(JSON.toJSONString(result));} catch (ClassNotFoundException | SQLException e) {// TODO 自动生成的 catch 块e.printStackTrace();}}}

SelectUserByIdServlet.java

package com.newcapec.servlet;import java.io.IOException;import java.sql.SQLException;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 com.newcapec.dao.UserInfoDao;import com.newcapec.entity.UserInfoEntity;/*** Servlet implementation class SelectUserByIdServlet*/@WebServlet(name = "/SelectUserByIdServlet", urlPatterns = "/SelectUserByIdServlet")public class SelectUserByIdServlet extends HttpServlet {private static final long serialVersionUID = 1L;private UserInfoDao userInfoDao = new UserInfoDao();/*** @see HttpServlet#HttpServlet()*/public SelectUserByIdServlet() {super();// TODO Auto-generated constructor stub}/*** @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse*response)*/protected void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {// 此处可以使用过滤器批量处理request.setCharacterEncoding("utf-8");response.setContentType("text/json;charset=utf-8");int userId = Integer.parseInt(request.getParameter("userId"));try {UserInfoEntity userInfoEntity = userInfoDao.selectById(userId);response.getWriter().write(JSON.toJSONString(userInfoEntity));} catch (ClassNotFoundException | SQLException e) {// TODO 自动生成的 catch 块e.printStackTrace();}}/*** @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse*response)*/protected void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {// TODO Auto-generated method stubdoGet(request, response);}}

UpdateUserServlet.java

package com.newcapec.servlet;import java.io.IOException;import java.sql.SQLException;import java.util.HashMap;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 com.newcapec.dao.UserInfoDao;import com.newcapec.entity.UserInfoEntity;/*** Servlet implementation class UpdateUserServlet*/@WebServlet(name = "/UpdateUserServlet", urlPatterns = "/UpdateUserServlet")public class UpdateUserServlet extends HttpServlet {private static final long serialVersionUID = 1L;private UserInfoDao userInfoDao = new UserInfoDao();/*** @see HttpServlet#HttpServlet()*/public UpdateUserServlet() {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 stubresponse.getWriter().append("Served at: ").append(request.getContextPath());}/*** @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse*response)*/protected void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {// 此处可以使用过滤器批量处理request.setCharacterEncoding("utf-8");response.setContentType("text/json;charset=utf-8");int userId = Integer.parseInt(request.getParameter("userId"));String userName = request.getParameter("userName");String userPwd = request.getParameter("userPwd");UserInfoEntity entity = new UserInfoEntity(userId, userName, userPwd);try {boolean flag = userInfoDao.update(entity);HashMap<String, Boolean> result = new HashMap<>();result.put("flag", flag);response.getWriter().write(JSON.toJSONString(result));} catch (ClassNotFoundException | SQLException e) {// TODO 自动生成的 catch 块e.printStackTrace();}}}

user_manager.html

<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><link rel="stylesheet" href="../bootstrap4/css/bootstrap.min.css"><link rel="stylesheet" type="text/css" href="../font-awesome-4.7.0/css/font-awesome.min.css" /><link href="../bootstrap-table/bootstrap-table.min.css" rel="stylesheet" /><script src="../jquery/jquery.min.js"></script><script src="../js/popper.min.js"></script><script src="../bootstrap4/js/bootstrap.min.js"></script><script src="../bootstrap-table/bootstrap-table.js"></script><script src="../bootstrap-table/locale/bootstrap-table-zh-CN.js"></script><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><title>用户管理</title><script type="text/javascript">function batchDelete() {var rows = $('#userInfoTab').bootstrapTable('getSelections');console.log(rows);var userIds = new Array();for (var i = 0; i < rows.length; i++) {userIds.push(rows[i].userId);}console.log(userIds);$.ajax({type: "POST",url: "../DeleteUserServlet",data: { "userIds": userIds },success: function (msg) {if (msg.flag) {alert("成功");//刷新数据$('#userInfoTab').bootstrapTable("refresh");} else {alert("失败");}}});}function addUserInfo() {var userName = $("#addUserName").val();var userPwd = $("#addUserPwd").val();var userdata = {"userName": userName,"userPwd": userPwd};$.ajax({type: "POST",url: "../AddUserServlet",data: userdata,success: function (msg) {if (msg.flag) {alert("成功");//刷新数据$('#userInfoTab').bootstrapTable("refresh");} else {alert("失败");}$("#addUserName").val("");$("#addUserPwd").val("");}});}function edit(userId) {console.log(userId);//通过该ID获取数据//通过ajax发起请求获取用户信息$.ajax({type: "get",url: "../SelectUserByIdServlet",data: { "userId": userId },success: function (msg) {console.log(msg);//获取成功后填入参数展示模态框$("input[name='userId']").val(msg.userId);$("input[name='userName']").val(msg.userName);$("input[name='userPwd']").val(msg.userPwd);$("#updateUserInfo").modal('show');}});//执行更新}function updateUserInfo() {var userInfo = {"userId": $("input[name='userId']").val(),"userName": $("input[name='userName']").val(),"userPwd": $("input[name='userPwd']").val()};$.ajax({type: "post",url: "../UpdateUserServlet",data: userInfo,success: function (msg) {if (msg.flag) {alert("成功");//刷新数据$('#userInfoTab').bootstrapTable("refresh");} else {alert("失败");}$("input[name='userId']").val("");$("input[name='userName']").val("");$("input[name='userPwd']").val("");}});}</script></head><body><div style="padding: 10px"><div id="toolbar" style="display: flex;"><button type="button" class="btn btn-info" data-toggle="modal" data-target="#addUserInfo"><i class="fa fa-plus"></i> 添加</button><button type="button" class="btn btn-danger" onclick="batchDelete()"><i class="fa fa-minus"></i> 批量删除</button></div><table id="userInfoTab" class="table table-hover table-bordered table-striped"></table><div class="modal fade" id="updateUserInfo"><div class="modal-dialog"><div class="modal-content"><div class="modal-header bg-info"><h4 class="modal-title">更新用户信息</h4><button type="button" class="close" data-dismiss="modal">×</button></div><div class="modal-body"><form><input type="hidden" name="userId" /><div class="input-group mb-3"><div class="input-group-prepend"><span class="input-group-text"><i class="fa fa-user"></i></span></div><input type="text" name="userName" class="form-control" placeholder="Username"></div><div class="input-group mb-3"><div class="input-group-prepend"><span class="input-group-text"><i class="fa fa-lock"></i></span></div><input type="password" name="userPwd" class="form-control" placeholder="userpwd"></div></form></div><div class="modal-footer"><button type="button" class="btn btn-success" data-dismiss="modal"onclick=updateUserInfo()>更新</button><button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button></div></div></div></div><div class="modal fade" id="addUserInfo"><div class="modal-dialog"><div class="modal-content"><div class="modal-header bg-info"><h4 class="modal-title">添加用户信息</h4><button type="button" class="close" data-dismiss="modal">×</button></div><div class="modal-body"><form><div class="input-group mb-3"><div class="input-group-prepend"><span class="input-group-text"><i class="fa fa-user"></i></span></div><input type="text" id="addUserName" class="form-control" placeholder="Username"></div><div class="input-group mb-3"><div class="input-group-prepend"><span class="input-group-text"><i class="fa fa-lock"></i></span></div><input type="password" id="addUserPwd" class="form-control" placeholder="userpwd"></div></form></div><div class="modal-footer"><button type="button" class="btn btn-success" data-dismiss="modal"onclick=addUserInfo()>添加</button><button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button></div></div></div></div></div><script>var icons = {paginationSwitchDown: 'fa-caret-square-down',paginationSwitchUp: 'fa-caret-square-up',refresh: 'fa-refresh',toggleOff: 'fa-toggle-off',toggleOn: 'fa-toggle-on',columns: 'fa-th-list',fullscreen: 'fa-arrows-alt',detailOpen: 'fa-plus',detailClose: 'fa-minus'};//异步加载表格数据$('#userInfoTab').bootstrapTable({url: '../SelectAllServlet', //请求后台的URL（*）method: 'get', //请求方式（*）toolbar: '#toolbar',//工具按钮用哪个容器striped: true, //是否显示行间隔色cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）pagination: true, //是否显示分页（*）icons: icons, //重新定义图标修复图标加载失败问题queryParams: function (params) {var temp = { //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的limit: params.limit, //页面大小offset: params.offset //页码//userName: $("#userName").val()//statu: $("#txt_search_statu").val()};return temp;},sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*）pageNumber: 1, //初始化加载第一页，默认第一页pageSize: 10, //每页的记录行数（*）pageList: [10, 15, 20, 25], //可供选择的每页的行数（*）//search: true, //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大strictSearch: true,showRefresh: true, //是否显示刷新按钮clickToSelect: true,//是否启用点击选中行uniqueId: "userId", //每一行的唯一标识，一般为主键列//showToggle:true,//是否显示详细视图和列表视图的切换按钮//cardView: false,//是否显示详细视图columns: [{checkbox: true}, {field: 'userId',title: '用户Id'}, {field: 'userName',title: '用户名'}, {field: 'createTime',title: '创建时间'}, {field: 'updateTime',title: '更新时间'}, {field: 'userId',title: '编辑',formatter: function (value, row, index) {var e = '<a class="btn btn-waring" href="#" mce_href="#" title="编辑" onclick="edit(\''+ row.userId+ '\')"><i class="fa fa-edit"></i>编辑</a> ';return e;}}]});</script></body></html>