项目一众筹网04_4_角色维护删除_单条删除和批量删除怎么实现_确认提示，，你真的要删除吗__@RequestBody和@ResponseBody结合使用_全选功能_前端获取id发到后端_ajax发送

2021/12/23 6:38:06

编程Tag： 前端删除批量模态单条我们 __ requestbody

本文主要是介绍项目一众筹网04_4_角色维护删除_单条删除和批量删除怎么实现_确认提示，，你真的要删除吗__@RequestBody和@ResponseBody结合使用_全选功能_前端获取id发到后端_ajax发送，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

角色维护删除系列文章目录

文章目录

角色维护删除系列文章目录
22-删除-目标和思路（下一篇）
- 单条删除和批量删除怎么实现
- 批量删除和单条删除合成一套
- 思路图
23-后端
- 在这里我们就@RequestBody和@ResponseBody都用到了
24-前端-打开模态框
25-前端-执行删除
- 如何判断代码是否是动态生成的
- 前端-执行删除
- ==@RequestBody和@ResponseBody的结合使用，一段看懂==
26-前端-单条删除（）
27-前端-批量删除-全选全不选功能
28-前端-批量删除-收集要删除的信息
29-删除-小结

22-删除-目标和思路（下一篇）

同理，删除跟修改一样
动态生成的数据需要使用特定方式绑定函数on函数的使用，解决只有当前页面可以弹出模态框，其它页面弹不出来的问题_dom操作获取角色名称显示回显

在这里插入图片描述

单条删除和批量删除怎么实现

在这里插入图片描述

批量删除和单条删除合成一套

我们想想，我们当然可以写两个方法来进行单条删除和批量删除
但是我们其实也可以合并成一套
这样又可以少写一些代码，节约社会资源 (
单条数据删除是根据id，批量删除是根据一组id 即数组，其实是可以遍历去单条删除的
在这里插入图片描述
后端只处理一种情况即可，就只处理数组的情况，在前端去做处理即可

在这里插入图片描述

思路图

在这里插入图片描述

23-后端

主要是SSM框架太强大了，我们简单增删改查，根本就不需要写sql
所以目前后端看起来特别简单，直接调用就好了
有两种方式，一种是循环
在这里插入图片描述
我们这里直接使用第2种方式，第一种方式也知道就行了我们这里主要是学习第2种方式，开阔视野

内部也是用了各种封装

在这里我们就@RequestBody和@ResponseBody都用到了

在这里插入图片描述
如果没有 @RequestBody，我们就没办法在前端去通过ajax传入json数据的data，，相当于我们没办法通过ajax传参过来到后端，必须借助@RequestBody

下面就是前端要怎么写
首先前端的思路我们要先知道
在这里插入图片描述

24-前端-打开模态框

要想把模态框打开，必须得先有模态框
在这里插入图片描述

写一个临时的测代码测试一下上面这段代码

有点靠边，我们做一个居中一点的

千万别忘记清除旧数据，否则会一直叠加

点击确认以后把数据发送给后端，我们可以想到，这肯定是ajax了
在这里插入图片描述

25-前端-执行删除

如何判断代码是否是动态生成的

在这里插入图片描述

这说明模态框里面的这个代码不是动态生成的

前端-执行删除

所以我们可以这么写，而不需要向前面修改一样去使用 on，动态生成的就要用on，不是动态生成的可以不用on，
逻辑是，点击删除后，会弹出模态框，让我们确认是否真的删除
我们这里真正触发删除的是确认删除按钮，而不是删除，
而确认删除按钮是模态框里面的，不是js动态生成的，所以不用on
我们要把什么发给后台
我们要把id 数组发给后台
但是这个东西怎么去获取
最前端在这里， 26-前端-单条删除，继续往下会说到
在这里插入图片描述

回过头看 my -role.js 里面怎么写

隔着几个函数，所以我们要考虑用全局变量

在这里插入图片描述

@RequestBody和@ResponseBody的结合使用，一段看懂

在这里插入图片描述
当请求体是json数据的时候，我们就必须要告诉服务器

后面的部分，可以复制一下其它的ajax方法改改即可

下面看不一样的部分怎么去写

26-前端-单条删除（）

前面已经讲过，这里为了结合批量删除的理解我们再说一遍
首先注意，这里每一行数据的删除按钮是js动态生成的，所以绑定这个按钮的事件要用on
在这里插入图片描述

整理一下代码

下面就是看批量删除

27-前端-批量删除-全选全不选功能

在这里插入图片描述
首先要给这个全选按钮绑定单击函数

正确的在这

在这里插入图片描述
那么如何根据多选框的状态去设置其它的选择框的状态呢？

在这里插入图片描述

反过来怎么做，这里需要注意，这个是动态生成的，所以我们需要 on
复制一下前面的on是怎么写的

非常巧妙
下面我们看结果

在这里插入图片描述

全选、全不选就完成了
下面就是批量删除按钮要具体怎么写

28-前端-批量删除-收集要删除的信息

绑定单击函数，需要有id，我们加个id
在这里插入图片描述
首先我们要知道被勾选的是哪些

为啥这么写，，我们分析一下

有一种情况是什么都没有选，用户就点了（批量）删除
这种情况要怎么处理，在代码里面怎么写

测试
如果没有选择

如果选择了
在这里插入图片描述
bug 解决
全选删除完成后，，全选按钮没有复原