中软国际day8

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