通过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>