前端部分
前端代碼主要負責收集用戶選擇的學生記錄的?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);
根據受影響的行數判斷刪除操作是否成功,并將相應的消息返回給前端。