ajax实现批量删除

最新推荐文章于 2021-08-05 14:32:23 发布

Mr.LiJiaHao

最新推荐文章于 2021-08-05 14:32:23 发布

阅读量1.6k

点赞数

CC 4.0 BY-SA版权

分类专栏： javaweb js ajax ssm java 文章标签： ajax SpringMVC Controller 批量删除 java

本文链接：https://blog.youkuaiyun.com/codeHaoHao/article/details/82889547

java 同时被 3 个专栏收录

16 篇文章

订阅专栏

ssm

6 篇文章

订阅专栏

javaweb

5 篇文章

订阅专栏

本文详细介绍了一种利用Ajax技术批量删除数据的方法。通过在HTML中设置type为checkbox的input多选框，结合jQuery和Ajax，实现了用户界面的批量选择与后台数据的批量删除操作。文章还展示了如何在控制器中接收并处理Ajax发送的请求，完成数据的批量删除。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这几天一直在学习ajax，实现了用ajax来批量删除数据。

HTML

<thead>
    <tr>
        <th class="table-check">
            <input id="allchk" onclick="allcheck();" type="checkbox" />
        </th>
        <th class="table-id">ID</th>
        <th class="table-title">photo</th>
    </tr>
</thead>
<tbody id="Cinfor_tbody">
    <c:forEach var="project" items="${list }">
        <tr id="tr_${project.id }">
            <td class="table-check">
                <input name="ids" value="${project.id }" type="checkbox" />
            </td>
            <td class="table-id">${project.id }</td>
            <td class="table-proficiency">${project.category.categoryName }</td>
        </tr>
    </c:forEach>
</tbody>

type属性为checkbox的input多选框的name为ids，value为数据的id，我们要根据这个id来进行删除。

ajax

//全选，这个方法实现点击id为allchk的input时，下列的所有多选框变为checked的状态
function allcheck(){
    if ($("#allchk").is(':checked')) {
         $("input[name='ids']").prop("checked",true);
    }else if($("#allchk").is(':checked')==false){
        $("input[name='ids']").prop("checked",false);
    }
}
//批量删除
$(function(){
    $("#deleteSkills").click(function(){
        //判断是否至少选择一项
        var checkedNum = $("input[name='ids']:checked").length;
        if(checkedNum==0){
            alert("请至少选择一项");
            return;
        }
        if(confirm("确定要删除所选项目？")){
            //这个数组存储要删除的数据的id
            var checkedList = new Array();
            //每一个被选中的name为ids的input标签
            $("input[name='ids']:checked").each(function(){
                checkedList.push($(this).val());//将id存入数组
            });
            $.ajax({
                type:"post",
                dataType:"json",
                url:"deleteProjects.action",//不同页面只用更改action即可
                async:true,
                //数组的toString里的id是用","分隔开的，例如数组{"1","2","3"},同String后为"1,2,3"
                data:{"deleteList":checkedList.toString()},
                success:function(data){
                    if(data==1){
                        for(var i=0;i<checkedList.length;i++){
                            $("#tr_"+checkedList[i]).remove();//ajax动态移除
                        }
                        alert("删除成功");
                    }else{
                        alert("删除失败");
                    }
                },
                error:function(){
                    alert("error");
                }
             })
         }
     })
              			
})

Controller

/*
 * 通过id批量删除project
 */
@RequestMapping("/deleteProjects.action")
@ResponseBody
public String deleteProjects(String deleteList){
    //因为传递的deleteList为带","的字符串,所以需要消掉分隔符转为数组
	String[] ids = deleteList.split(",");
	for(String id:ids){
		projectService.deleteProjectById(Integer.parseInt(id));
	}
	return "1";
}

这里需要特别注意的就是我们要把ajax传过来的String数据分割为数组。