基于ssm使用ajax实现批量删除

此次批量删除是在上一篇博客上进行功能的添加，详情请看：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实现批量删除