jquery+ajax提交数组（批量删除操作）

最新推荐文章于 2024-03-06 22:58:32 发布

原创最新推荐文章于 2024-03-06 22:58:32 发布 · 367 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #ajax #java

jquery 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一个使用Ajax提交数组实现批量删除功能的例子。前端通过jQuery获取选中的项，并以数组形式发送到后端。后端使用Java接收数组参数并调用服务层进行批量删除操作。

ajax提交数组

前端
- 效果图
- ajax提交数组
后台

前端

效果图

点击多选框，将需要删除的数据选中，点击批量删除
在这里插入图片描述

ajax提交数组

数组提交，需要设置traditional : true,数组序列化

// 批量选择
    $(".batchDel-th").click(function(){
        var checks=$(".batchDel-check");
        $.each(checks,function(i,input){
            //状态反选
            input.checked=input.checked==true?false:true;
        });
    });

// 批量删除
$('.batchDel-btn').click(function () {
    var ids = [];
    // 拿到当前被选中的数据
    var checks = $('.batchDel-check:checked');
    if (checks.length != null && checks.length > 0){
        // 拿到被选中的数据的id
        $.each(checks, function (i, check) {
            var id = $(check).closest("tr").attr("data-id");
            ids.push(id);
        });
        // $.each(selectedCategoryId, function (i, id) {
        //     alert(id);
        // });
        $.ajax({
            url : "/category/batchDel.json",
            type : "POST",
            traditional : true,
            data : {
                ids : ids
            },
            success : function (result) {
                loadCategoryList();
            }
        });
       // ids = [];
    }
});

后台

controller

// 批量删除分类
    @RequestMapping("/batchDel.json")
    @ResponseBody
    public CommonReturnType batchDel(@RequestParam("ids") int[] ids){
        categoryService.batchDelCategory(ids);
        return CommonReturnType.success("success");
    }

mapper

package com.lzy.mapper;

import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.lzy.pojo.Category;

public interface CategoryMapper extends BaseMapper<Category> {

}

service

 // 批量删除分类
    @Override
    public void batchDelCategory(int[] ids) {
        if (null !=ids && ids.length > 0){
            for (int id : ids){
                categoryMapper.deleteById(id);
            }
        }
    }