通过Ajax实现批量删除

Ajax

全称为”Asynchronous JavaScript and XML”(异步JavaScript和XML),通过后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新，可以在不重新加载整个网页的情况下，对网页的某部分进行更新. Ajax的核心是XMLHttpRequest对象，它是Ajax实现的关键-发送异步请求、接受响应以及执行回调。

Dao层添加

//批量删除 void batchDelete(List<Integer> ids);

在Mapper中添加

<!-- 批量删除 --> <delete id="batchDelete" parameterType="list"> delete from tb_user where id in <foreach collection="list" item="id" open="(" close=")" separator=","> #{id} </foreach> </delete>

Servicel层添加

//批量删除 void batchDelete(List<Integer> ids);

ServiceImpl添加

@Override public void batchDelete(List<Integer> ids) { userDao.batchDelete(ids); }

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"; }

在user-list.jsp中添加

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script type="text/javascript"> function deleteAll() { var checkedNum = $("input[name='ids']:checked").length; if(checkedNum==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/batchDelete.do", data : {userList : userList.toString()}, success : function () { alert("删除成功!"); location.reload(); }, error : function () { alert("删除失败!") } }) } </script>

并将原刷新的位置改为批量删除

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