使用ajax进行批量删除

最新推荐文章于 2024-10-13 15:44:49 发布

橙芋heng

最新推荐文章于 2024-10-13 15:44:49 发布

阅读量806

点赞数 1

本文链接：https://blog.csdn.net/qq_42358263/article/details/97015834

版权

本文介绍如何使用Ajax实现网页上的批量删除功能，通过JavaScript捕获用户点击事件，利用Ajax引擎向服务器提交请求，避免了页面刷新，提升了用户体验。文章详细解释了实现过程，包括获取选中的项、将数据传递给服务器、在服务器端处理这些数据以及返回结果。

摘要由CSDN通过智能技术生成

ajax

ajax的工作原理相当于在用户和服务器之间加了一个中间层（AJAX引擎），使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器。向一些数据验证和数据处理等都交给Ajax引擎自己来做，只有确定需要从服务器读取新数据时再由AJAX引擎代为向服务器提交请求。

与传统模式的区别

传统模式与用户交互时用户发送一次请求就需要更新一次界面，使用ajax之后用户发送请求，服务器处理之后不用刷新页面。

ajax实现批量删除

1.响应按钮事件

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

2.写deleteAll()函数
（一）使用jQuery获得选中的框的数量
（二）使用jQuery将选中框的用户的id值传给userlist
（三）使用Ajax实现批量删除并只更新所有用户的部分
（四）在controller层实现删除所有用户的函数、并在dao层、service层分别实现这个函数

user-list

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

UserInfoOntroller

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

UserMapper

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