【知了堂学习笔记】利用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();
		}	
	}