这篇文章是记录一下实现基于SSM框架下页面表单的删除连带数据库相应数据的批量删除（ajax批量删除）的实现思路和源码

1.需求

能在前端页面点击按钮对勾选的数据实现批量删除，同时对应数据库的数据也要删除

2.开发环境

Jdk1.8

Tomcat 8.5

Idea 2019

MysqL 5.5

所需jar包：SSM必备jar包此处spring版本4.24

前端jquery：jquery-1.7.1.js

maven Jar包(全)

3.思路

1.表单数据前面要有一个单选框提供选择

2.通过所选取的单选框节点获取相应的id值

3.通过jquery.ajax将id传到服务器端

4.服务器端完成数据库操作

5.ajax内success完成相应表单数据的移除

4.实现

4.1

我们先来看前端页面的代码(jsp):将id值赋给了单选框的值，直接传递单选框的值给服务器

<%
    String path = request.getcontextpath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
            + path + "/";

%>
<%--批量删除--%>
    <script>
        function delAll() {
            var checkednum = $("input[name='IDCheck']:checked");
            //判断至少写了一项
            //var checkednum = $("input[name='IDCheck']:checked").length;
            if (checkednum.length == 0) {
                alert("请至少选择一项!");
                return false;
            }
            if (confirm("确定删除所选项目?")) {
                var checkedList = new Array();

                $("input[name='IDCheck']:checked").each(function () {
                    //将单选框的值(将id值同样赋给了单选框)传入数组中
                    checkedList.push($(this).val());
                });
                /*"html": 返回纯文本 HTML 信息；包含的 script 标签会在插入 dom 时执行。*/
                $.ajax({
                    type: "POST",
                    url:  "<%=basePath%>/batchDeletes.action",,
                    data: {"id": checkedList.toString()},
                    datatype: "html",
                    success: function (data) {
                        alert("删除成功");
                        for (var i = 0; i < checkednum.length; i++) {
                            //此处需要注意的是父节点对子节点的移除
                            checkednum[i].parentNode.parentNode.remove();
                        }
                    },
                    error: function (data) {
                        alert("删除失败");
                    }
                });
            }
        }
    </script>

<table class="table" cellspacing="0" cellpadding="0" width="100%"
                       align="center" border="0">
                    <tr>
                        <th width="30"><input type="checkBox" id="all"
                        //调用commonAll.js的全选反选方法，导入就可以使用，此处可以忽略
                                              onclick="selectOrClearallCheckBox(this);"/></th>
                        <th>编号</th>
                        <th>姓名</th>

                    </tr>
                   
                    <tbody>
                    <c:forEach items="${传入的pojo对象}" var="test">
                        <tr>
                            <td><input type="checkBox" name="IDCheck"
                                       value='${test.id}' /></td>
                            <td name="callListId">${test.id}</td>
                            <td>${test.name}</td>

                        </tr>

                    </c:forEach>
                    </tbody>
                </table>

5.2 Service

public int batchDeletes(List delList);

5.3 ServiceImpl

@Autowired
    private Mapper mapper;

@Override
	public int batchDeletes(List delList) {
		return mapper.batchDeletes(delList);
	}

5.4 Mapper

/**
	 * 批量删除
	 */
	int batchDeletes(List delList);

5.5 Mapper.xml

<!--批量删除 -->
	<delete id="batchDeletes" parameterType="java.util.List">
		DELETE FROM 表名 where id in
		<foreach collection="list" index="index" item="id" open="(" separator="," close=")">
			#{id}
		</foreach>
	</delete>

6.结果

符合需求

8. 遇到的问题

一开始对jquery父节点和子节点的取值一直取不到id的值，实在想不出办法就把id的值传给了单选框，但是更优的还是能通过父子节点找到id的值

SSM框架下实现页面表单和数据库的批量删除ajax批量删除源码