1、選中要刪除的學生信息
2、點擊 刪除選中 按鈕，把復選框中的值取出提交到后台
3、后台獲取選中的id
4、前端也跟着刪除數據
示例代碼：
前端代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h1>學生信息列表</h1> <input type="button" id="del" value="刪除選中">
//表格外面加一個form表單包括table,為了序列化表單
//里面不需要添加method..就給一個id就行了 <form id="f"> <table border="1" id="tab"> <tr> <th>編號</th> <th>姓名</th> <th>性別</th> <th>年齡</th> <th>班級</th> <th>全選<input type="checkbox" id="selects"></th> </tr> </table> </form> </body> <script src="js/jquery-1.12.4.js"></script> <script> //頁面加載時初始化數據（數據庫讀取數據） $(function () { $.ajax("stu",{ type:"post", success:function (data) { //后台響應回來 json 格式的數據 //循環遍歷學生信息列表 $.each(data,function (index,obj) { $("#tab").append( "<tr>"+ "<td>"+obj.sid+"</td>"+ "<td>"+obj.sname+"</td>"+ "<td>"+obj.ssex+"</td>"+ "<td>"+obj.sage+"</td>"+ "<td>"+obj.clazz.cname+"</td>"+ // 注意！！！ 在input里面需要 添加name，為了后台讀取選中的值 req.getParameterValues("stuId"); "<td class='box'><input type='checkbox' name='stuId' value='"+obj.sid+"'></td>"+ "</tr>" ); }); //全選/全不選 var i=0; $("#selects").on("click",function () { if(i==0){ $("#tab :checkbox").prop("checked",true); i=1; }else{ $("#tab :checkbox").prop("checked",false); i=0; } }) //刪除 $('#del').on("click",function () { //取出表單序列化的值 var param=$('#f').serialize(); //用ajax提交序列化的值 $.get("dels",param,function (data) { if(data==200){ //如果在后台返回來200數字表示后台在數據庫已經刪除成功 //后台刪除成功之后前端用jQuery也隨之刪除對應的節點,為了不用重新再查詢一遍數據 $(".box :checked").parent().parent().remove(); }else{ alert("刪除失敗！"); } }) /* * 也可以這種方式提交 * $.ajax("dels",{ type: 'get', data: $("#f").serialize(), success: function(data) { // your code ... } }); * */ }); } }); }) </script> </html>
后台代碼：（只附上刪除的Servlet代碼）
@WebServlet("/dels")
public class DeleteServlet extends HttpServlet {
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//取出提交過來表單選中序列化的值 name都為stuId的
//取出來是一個String[]數組
String[] sids=req.getParameterValues("stuId");
for (String str:sids) {
System.out.println("獲取id"+str);
}
//實例化dao方法
StudentDao dao =new StudentDao();
//調用刪除的方法 返回int[]數組
int[] row=dao.studelete(sids);
//只需判斷有沒有數據即可，有就響應200表示成功后台刪除成功，否則500刪除失敗
resp.getWriter().println(row!=null?200:500);
}
}