前端部分
前端代码主要负责收集用户选择的学生记录的 id
,并将这些 id
发送给后端的 DeleteMoreServlet
进行处理。
批量删除按钮绑定点击事件
$(".deleteMore").on("click",function(){// ...
});
当用户点击 “批量删除” 按钮时,会触发该点击事件。
收集选中记录的 id
var ids = "";
for(var i=0;i<$(".delItem:checked").length;i++){if(i==$(".delItem:checked").length-1){ids=ids+$(".delItem:checked").eq(i).attr("index");} else {ids=ids+$(".delItem:checked").eq(i).attr("index")+",";}
}
遍历所有被选中的复选框(类名为 delItem
),将其 index
属性值(即学生记录的 id
)拼接成一个以逗号分隔的字符串 ids
。
查是否有选中记录
if(ids.length==0){alert("最少选择一项");return;
}
如果 ids
字符串的长度为 0,说明用户没有选择任何记录,弹出提示框并终止操作。
确认删除操作
if(confirm("确定要删除吗?")){// ...
} else {alert("感谢手下留情");
}
弹出确认框,询问用户是否确定要删除选中的记录。如果用户点击 “确定”,则继续执行删除操作;如果用户点击 “取消”,则弹出提示框并终止操作。
发送删除请求
$.ajax({url:"DeleteMoreServlet",type:"post",data:{ids},success:function(value){alert(value);// 页面刷新location.reload();},error:function(){alert("出错啦");}
});
使用 jQuery 的 $.ajax
方法发送一个 POST 请求到 DeleteMoreServlet
,并将拼接好的 ids
字符串作为请求参数。如果请求成功,弹出服务器返回的消息并刷新页面;如果请求失败,弹出错误提示框。
后端部分
后端代码主要负责接收前端发送的 ids
字符串,拼接 SQL 语句并执行删除操作,最后将操作结果返回给前端。
接收请求参数
String ids = request.getParameter("ids");
在 DeleteMoreServlet
的 doPost
方法中,通过 request.getParameter
方法获取前端发送的 ids
字符串。
拼接 SQL 语句
String sql = "delete from student where id in("+ids+")";
将 ids
字符串拼接到 SQL 语句中,形成一个 DELETE
语句,用于删除 student
表中 id
在指定列表中的记录。
执行 SQL 语句
int num = MysqlUtil.del(sql);
调用 MysqlUtil
类的 del
方法执行 SQL 语句,并返回受影响的行数。
返回操作结果
String res = "删除失败";
if(num>0) {res = "删除成功";
}
response.setCharacterEncoding("utf-8");
response.getWriter().write(res);
根据受影响的行数判断删除操作是否成功,并将相应的消息返回给前端。