此次批量删除是在上一篇博客上进行功能的添加，详情请看：https://blog.csdn.net/qq_40718312/article/details/96310016 在上一次中，实现了权限登录，这次运用ajax实现批量删除。我们知道AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML），其最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容，这样就可以减少资源的浪费。
1.修改原界面 原用户列表页面是这样的 需要在左上角显示登陆后的用户名，并在右上角实现退出功能 ①显示用户名和退出功能的实现 在aside.jsp添加
<%@taglib prefix="security" uri="http://www.springframework.org/security/tags" %>并修改部分代码为
<li id="system-setting"> <security:authorize access="hasRole('ADMIN')"> <a href="${pageContext.request.contextPath}/user/findAll.do?page=1&size=5"> <i class="fa fa-circle-o"></i> 用户管理 </a> </security:authorize> </li>在header.jsp中添加
<%@taglib prefix="security" uri="http://www.springframework.org/security/tags" %>修改
class="user-image" alt="User Image"> <span class="hidden-xs"> </span> </a> <ul class="dropdown-menu">为
class="user-image" alt="User Image"> <span class="hidden-xs"> </span> <security:authentication property="principal.username"></security:authentication> </a> <ul class="dropdown-menu">并修改
<div class="pull-right"> <a href="${pageContext.request.contextPath}/logout.do" class="btn btn-default btn-flat">注销</a>②修改页面的刷新按钮为批量删除
在user-list.jsp中把
<button type="button" class="btn btn-default" title="刷新"> <i class="fa fa-refresh"></i> 刷新 </button>改成
button type="button" class="btn btn-default" title="批量删除" onclick="deleteAll()"> <i class="fa fa-refresh"></i> 批量删除 </button>修改
<c:forEach var="userInfos" items="${pageInfo.list}"> <tr> <td><input name="ids" type="checkbox" ></td> <td>${userInfos.id}</td>为
在这里插入代码片 <c:forEach var="userInfos" items="${pageInfo.list}"> <tr> <td><input name="ids" type="checkbox" value="${userInfos.id}"></td> <td>${userInfos.id}</td>这样界面修改基本完成 2.运用ajax实现批量删除 添加js包 链接：https://pan.baidu.com/s/1pPTKcfHs94JimSQbpRzVNg 提取码：8819 解压后复制到webapp中 ①在IUserInfoDao中添加
void deleteAll(List<Integer> ids);在UserInfoMapper.xml中添加
<delete id="deleteAll" parameterType="list"> delete from userinfo where id in <foreach collection="list" item="id" open="(" close=")" separator=","> #{id} </foreach> </delete>这是实现在数据库中批量删除数据
②在IUserInfoService中添加
void deleteAll(List<Integer> list);在UserInfoServiceImpl中实现它
@Override public void deleteAll(List<Integer> list) { userInfoDao.deleteAll(list); }③在UserInfoController中添加
@RequestMapping("deleteAll.do") @ResponseBody public String deleteAll(String userList){ String [] strs=userList.split(","); List<Integer> ids=new ArrayList<>(); for(int i=0;i<strs.length;i++){ ids.add(Integer.parseInt(strs[i])); } userInfoService.deleteAll(ids); return ""; }然后在user-list.jsp中添加
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.2.1.min.js"></script> <script type="text/javascript"> function deleteAll() { var checkNum=$("input[name='ids']:checked").length; if(checkNum==0){ alert("请选择至少一项"); return; } if(confirm("确定要删除吗？")){ var userList = new Array(); $("input[name='ids']:checked").each(function(){ userList.push($(this).val()) }); } $.ajax({ type:"post", url:"${pageContext.request.contextPath}/user/deleteAll.do", data:{userList:userList.toString()}, success:function () { alert("删除成功！"); location.reload(); }, error:function () { alert("删除失败！"); }, }) } </script>这样也就实现了ajax的批量删除功能 到这里，就实现了使用ajax实现批量删除
