java从前端传数组到后端实现通过id批量删除数据

原创已于 2023-11-30 04:12:11 修改 · 4.7k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#ajax #java

于 2022-11-02 19:46:08 首次发布

具体的功能实现专栏收录该内容

40 篇文章

订阅专栏

本文介绍了一个基于前后端分离的应用，实现了批量删除角色的功能。前端使用jQuery发起AJAX请求，后端采用Spring Boot和MyBatis Plus进行数据操作。

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

一、功能说明

需要实现的效果是：勾选左边的复选框，点击删除，会请求后台接口，根据选择行的角色id批量删除角色。

二、项目结构

三、前端代码

前端使用ajax和后端交互，具体代码如下：

index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>首页</title>
    </head>

    <body>
        <button>添加</button>
        <button type="button" id="delete">删除</button>

        <table id="list" border="1"></table>

        <script src="../js/jquery.min.js"></script>
        <script src="../js/index.js"></script>
    </body>
</html>

index.js

let ids = [];
let base = "http://localhost:8080";

function selectRow(id) {
    ids.push(id);

    console.log(ids);
}

function clear() {
    let initHtml = "";

    initHtml += "<tr>";
    initHtml +=     "<th>选择</th>";
    initHtml +=     "<th>角色ID</th>";
    initHtml +=     "<th>角色名</th>";
    initHtml +=     "<th>等级</th>";
    initHtml +=     "<th>评分</th>";
    initHtml +=     "<th>金币</th>";
    initHtml += "</tr>";

    $("#list").empty();
    $("#list").append(initHtml);
}

function loadData() {
    let requestUrl = "/role_account/selectByPage";

    $.get(base + requestUrl, {
		page: 1,
		rows: 10
	}, function (response) {
        if (response.code === 200) {
            let children = "";
            let result = response.data;
            let list = result.rows;

            for(let i = 0; i < list.length; i++) {
                let data = list[i];

                children += "<tr>";
                children +=     "<td><input type='checkbox' onclick='selectRow(" + data.id + ")'></td>";
                children +=     "<td>" + data.id + "</td>";
                children +=     "<td>" + data.name + "</td>";
                children +=     "<td>" + data.grade + "</td>";
                children +=     "<td>" + data.score + "</td>";
                children +=     "<td>" + data.jinbi + "</td>";
                children += "</tr>";
            }

            clear();
            $("#list").append(children);
        } else {
            alert(response.message);
        }
    });
}

$(document).ready(function () {
    loadData();

    $("#delete").click(function () {
        let length = ids.length;

        if (length === 0) {
            alert("请选择要删除的数据");
        } else {
			let bool = confirm("是否确认删除？");
			
			if(bool) {
				let form = new FormData();
				
				form.append("ids", ids);
				
				$.ajax({
					url: base + "/role_account/deleteByIds",
					data: form,
					cache: false,
					async: true,
					type: "POST",
					dataType: 'json',
					processData: false,
					contentType: false,
					success: function (response) {
						loadData();
					},
					error: function(res) {
						if (res && res.responseJSON) {
							let response = res.responseJSON;
					
							if (res.status && res.status === 404) {
								alert("路径" + response.path + "不存在。");
							} else {
								alert(response.message);
							}
						}
					}
				});
			}
        }
    });

});

四、后端代码

controller层

@CrossOrigin
@RestController
@Api(tags = "角色账号管理")
@RequestMapping(path = "/role_account", produces="application/json; charset=utf-8")
public class RoleAccountController {
	private final RoleAccountService service;

	@Autowired
	public RoleAccountController(RoleAccountService service) {
		this.service = service;
	}

	@ApiOperation("通过id批量删除角色")
	@RequestMapping(value = "/deleteByIds", method = RequestMethod.POST)
	public JsonResult<Void> deleteByIds(@RequestParam("ids") List<String> ids) {
		service.deleteByIds(ids);

		return JsonResult.success("删除成功");
	}

	@ApiOperation("分页查询角色列表")
	@RequestMapping(value = "/selectByPage", method = RequestMethod.GET)
	public JsonResult<PageResult<RoleAccount>> selectByPage(RoleAccountPager pager) {
		Page<RoleAccount> page = service.selectByPage(pager);

		return JsonResult.restPage(page);
	}

}

service层

@Service
public class RoleAccountServiceImpl implements IRoleAccountService {
    @Autowired
	private RoleAccountMapper mapper;
    
	@Override
	public void deleteByIds(List<String> ids) {
		mapper.deleteBatchIds(ids);
	}

}

mapper层

持久层使用了MyBatis-Plus

@Repository
public interface RoleAccountMapper extends BaseMapper<RoleAccount> {

}

好了，本章就分享到这里了，感谢阅读~