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

偏执的太偏执、 2022-12-23 09:44 59阅读 0赞

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

***目   录***

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

DeleteUserServlet.java

SelectUserByIdServlet.java

UpdateUserServlet.java

user\_manager.html

--------------------

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

> **批量删除用户：**
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70][]
> 
> **单个删除用户：**
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 1][]
> 
> **更新用户信息：**
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 2][]
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 3][]
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 4][]

## 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 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 {
    		// 此处可以使用过滤器批量处理
    		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 stub
    		doGet(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 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 {
    		// 此处可以使用过滤器批量处理
    		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>

> 本周：
> 
> 1.  周二（2020年11月24日）下午~周四（2020年11月26日）上午：应该都是自己练习，把项目补充完整！！！
> 2.  周四（2020年11月26日）下午~周五（2020年11月27日）上午——实训汇报。
> 3.  周五（2020年11月27日）下午回郑州。为期3周的禹州实训，结束！！！
> 4.  周六（2020年11月28日）：第12届全国大学生数学竞赛

[Bootstrap4_MySQL_10_ _]: https://blog.csdn.net/weixin_44949135/article/details/109722002
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70]: /images/20221120/1c02ef19042b4b83a18f83559b7194bd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 1]: /images/20221120/f308c170a83147a4a228f052156e0cb7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 2]: /images/20221120/bf35bc6ad07e465fb28c19e7bfb05d30.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20201124224834606.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20201124224849722.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ==,size_16,color_FFFFFF,t_70