【知了堂学习笔记】利用ajax实现web中的批量删除

一．思路

实现批量删除，可以使用两种方式，第一种通过form表单提交数据，实现删除；第二种是通过ajax将选中的数据传递到后台进行删除。

首先，需要获取页面中，复选框选中的值；然后将它保存起来，然后通过ajax将参数传递给后台servlet对应的方法中，执行删除操作。

这里是界面

下面是jsp页面代码

<div class="wareTable"><table border=".5" id="wareTable"><tr class="tableTitle" bgcolor="#7088A3"><th><a><input type="checkbox" id="main" onclick="change();"><span>全选</span></a></th><th>仓库编号</th><th>仓库地点</th><th>仓库存放</th><th>仓库总容量</th><th>仓库库存</th><th>仓库管理人</th><th colspan="2">操作</th></tr><c:forEach items="${pb.beanList }" var="Warehouse" varStatus="i"> <tr class="tableItem"> <td ><input type="checkbox" value="${Warehouse.warehouse_id }" name="ck"></td> <td>${Warehouse.warehouse_id }</td> <td>${Warehouse.warehouse_site }</td> <td>${Warehouse.warehouse_count }</td> <td>${Warehouse.warehouse_inventory }</td> <td>${Warehouse.user_name }</td> <td><a href="${ctx }/wmessage?method=editWmessage&warehouse_id=${Warehouse.warehouse_id }" onclick=" ">编辑</a></td> <td><a href="${ctx }/wmessage?method=deleteWmessage&warehouse_id=${Warehouse.warehouse_id }" onclick=" ">删除</a></td></tr></c:forEach>

function change(){var main = document.getElementById("main");var flag = main.checked;var cks = document.getElementsByName("ck");for(var i=0;i<cks.length;i++){cks[i].checked = flag;}}function sendDel(){var cks = document.getElementsByName("ck");var id = "";for(var i=0;i<cks.length;i++){if(cks[i].checked){id += cks[i].value;if(i < cks.length-1){id += ",";}}}

Change():是为了实现全选功能

SendDel():是将复选框选中的checkbox的值，赋值给id，且id不是一个数组而是一个字符串，每个值之间通过,（逗号）分隔开

$.ajax({   type: "POST",   url: "/mone/wmessage",   data: "method=deleteMore&id="+id,   async: false,});

同过ajax将id传递给后台的对应servlet的方法

/** * 删除单条信息 * @param request * @param response * @return */public String deleteWmessage(HttpServletRequest request,HttpServletResponse response) {String warehouse_id = request.getParameter("warehouse_id");service.deleteWmessage(warehouse_id);return OBJECT_REDIRECT + "/wmessage?method=getWmessageById;}/** * 删除多条信息 * @param request * @param response * @return */public String deleteMore(HttpServletRequest request,HttpServletResponse response) {String wmessageIds = request.getParameter("id");if(wmessageIds == null) {return null;}String[] split = wmessageIds.split(",");for (String id : split) {service.deleteWmessage(id);}return OBJECT_REDIRECT + "/wmessage?method=getWmessageById;}

我是通过多次调用单次删除的方法，实现对的批量删除

下面是dao层的代码

private String sql = null;private QueryRunner tr = TxRunner.getInstance();

/** * 删除单条信息 */public void deleteWmessage(String warehouse_id) {sql = "update warehouse set del=1 where warehouse_id= ? ";try {tr.update(sql, warehouse_id);} catch (SQLException e) {e.printStackTrace();}}