使用Ajax实现批量删除_使用ajax完成批量删除

在上一次的笔记中，我们已经实现了安全登录，在本节学习将会使用Ajax的异步刷新技术实现用户的批量删除功能。

一、 首先介绍一下什么是Ajax：
Ajax 即“AsynchronousJavascriptAndXML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。

Ajax = 异步JavaScript和XML（标准通用标记语言的子集）。

Ajax 是一种用于创建快速动态网页的技术。

Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

二、下面我们来实现批量删除：
过程：管理员在管理用户界面勾选待删除的用户，点击“批量删除”按钮后，即删除选中的用户信息。

1、Dao层：
void batchDelete(List ids);
2、配置Mapper文件：

delete id="batchDelete" parameterType="list">
    delete from tb_user where id in
    <foreach collection=" list" item="id" open="(" close=")" separator=",">
        #{id}
    </foreach>
</delete>
1
2
3
4
5
6

注意：前端界面要传递一个id的集合给后端，这个集合是用逗号分隔不同id的。至于这个集合是如何传过来的将会在稍后解释。

3、Service层：
void batchDelete(List ids);
实现类：
public void batchDelete(List ids){
userDao.batchDelete(ids);
}

4、Controller层：

@RequestMapping("/batchDelete.do")
public String batchDelete(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.batchDelete(ids);
    return "redirect:findAll.do";
}
1
2
3
4
5
6
7
8
9
10

所以这个函数对应的是batchDelete.do这个动作，因为我们存放在数据库中的id都是int类型，所以在使用传进来的字符型参数时需要先转换为Int类型，然后传给其它层进行，执行完毕后跳到新的列表界面。

5、user-list.jsp界面：

							<th class="" style="padding-right: 0px"><input name="ids1"
									id="selall" type="checkbox" class="icheckbox_square-blue">
							</th>
							<th class="sorting_asc">ID</th>
							<th class="sorting_desc">用户名</th>
							<th class="sorting_asc sorting_asc_disabled">密码</th>
							<th class="text-center">操作</th>
						</tr>
						</thead>
						<tbody>
						<c:forEach var="user" items="${pageInfo.list}">
							<tr>
								<td><input name="ids2" value="${user.id}" type="checkbox" ></td>
								<td>${user.id}</td>
								<td>${user.username}</td>
								<td>${user.password}</td>
								<td class="text-center">
									<a href="${pageContext.request.contextPath}/user/findUserById.do?id=${user.id}" class="btn bg-olive btn-xs">更新</a>
									<a href="${pageContext.request.contextPath}/user/delUser.do?id=${user.id}" class="btn bg-olive btn-xs">删除</a>
									<a href="#" class="btn bg-olive btn-xs">添加角色</a>
								</td>
							</tr>
						</c:forEach>
						</tbody>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

这一部分的代码对应界面中用户列表的显示

    <button type="button" class="btn btn-default" title="批量删除" onclick="deleteAll()">

									<i class="fa fa-refresh"></i> 批量删除
								</button>
1
2
3
4

这一部分代码是说“批量删除”按钮绑定了函数：deleteAll()

<script type="text/javascript">
	function deleteAll() {
		var checkedNum =  $("input[name='ids2']:checked").length;
		if(checkedNum == 0){
		    alert("至少选择一项进行删除！");
		    return;
		}

		if(confirm("确定删除选中的用户吗？")){
		    var userList = new Array();
		    $("input[name='ids2']:checked").each(function(){
		        userList.push($(this).val());
			});
		}

		//提交
		$.ajax({
			type:"post",
			url:"${pageContext.request.contextPath}/user/batchDelete.do",
			data:{userList: userList.toString()},
			success: function(){
			    alert("删除成功！");
			    location.reload();
            },
			error :function(){
			    alert("删除失败！")
            }
		});
    }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

上面的代码是deleteAll()函数的具体实现，在这里使用了Ajax技术。
首先判断当前可选框是否被选中。如果选中了就会将id放到userList这个集合中，然后使用Ajax，分别写上对应的动作，要传入的参数以及成功或失败的处理方法等就可以了。接下来是截图展示：



除了批量删除外，Ajax可以用到的地方还有很多，比如登录时候的验证等，所以我们应该掌握好这种技术，争取在以后遇到复杂问题的时候灵活使用它。