Ajax批量删除

今天老师讲了通过勾选框实现批量删除的功能，同时利用Ajax更新用户列表，而不必重新加载页面。

在IUserinfoDao.java中加上deleteAll()函数：

public void deleteAll(List<Integer> ids);

在UserMapper.xml中加上sql语句：

<delete id="deleteAll" parameterType="list">
    delete from userinfo where id in
    <foreach collection="list" item="id" open="(" close=")" separator=",">
        #{id}
    </foreach>
</delete>

在相应的Service层加入deleteAll函数后，在Controller层写界面交互的函数：

@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界面利用ajax实现批量删除后的更新：

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

运行结果：
选中要删除的用户：

点击删除：

更新显示