如何使用ajax实现多条删除及前后端交互

版权声明：ApassionBoy https://blog.csdn.net/weixin_43150581/article/details/82627141

/*多条删除，以下代码是本人在springCloud中写的，

但是方法都大同小异，你看懂了，也就会了*/

---

• JSP页面如下：

<%@ page language='java' pageEncoding='UTF-8'%>
<%@taglib uri='http://www.dstech.net/dssp' prefix='dssp' %>
<%@taglib prefix='c' uri='http://java.sun.com/jsp/jstl/core' %>
<%@taglib prefix='fmt' uri='http://java.sun.com/jsp/jstl/fmt' %>
<script type='text/javascript'  src='${pageContext.request.contextPath}/busicomps/charTest/content/cpdcarmodel/cpdcarmodelList.js?version=${resourceVersion}'></script>
<script type='text/javascript'  src='${pageContext.request.contextPath}/busicomps/charTest/js/serviceapi/CpdCarModelService.js?version=${resourceVersion}'></script>

<div class="container-fluid app-container fullheight">
	<div class="app-content fullheight">
		<div class="panel panel-default fixed no-footer fullheight">
			<div class="panel-heading clearfix">
				<div class="panel-title pull-left">查询信息</div>
				<div class="panel-toolbar pull-right">
					<div class="form-inline">
						<input title="使用分组名查询车系" class="form-control" type="text" placeholder="模糊搜索：分组名"
						data-url="/rest/charTest/CpdCarGroupService/query?queryType=page&queryName=queryList&filterQuery=true&groupName="
						onKeyUp="DataTablesUtil.event.search(this, event, 'CpdCarGroupgrid')"/>
						
						<input title="实用Id查询车系" class="form-control" type="text" placeholder="搜索：groupId"
						data-url="/rest/charTest/CpdCarGroupService/query?queryType=page&queryName=queryList&filterQuery=true&groupId1="
						onKeyUp="DataTablesUtil.event.search(this, event, 'CpdCarGroupgrid')"/>
						<button class="btn btn-info " type="button"
							data-url="/charTest/CpdCarGroupService/add"
							data-id="CpdCarGroupgrid" onclick="add(this,'form','xxxxx')">
						    新增
						</button>
						<button class="btn btn-danger form-control" type="button"
							data-url="/rest/charTest/CpdCarGroupService?multi=true"
							onclick="del(this,'table')"
							data-id="CpdCarGroupgrid">
							删除
						</button>
					</div>
				</div>
			</div>

			<div class="panel-content">
				<table cellpadding="0" cellspacing="0" border="0"
					class="table table-striped table-bordered parent-fixed"
					id="CpdCarGroupgrid" data-page-length="25" data-selection="multiple"
					data-pk-column="groupId"
					data-url="/rest/charTest/CpdCarGroupService/query?queryType=page&queryName=queryList&filterQuery=true">
					<thead>
						<tr>
							<th data-column="_v_seq" width="30px" class="text-center">序号</th>
							<th data-column="groupId"   data-orderable="false" class="text-center"
								width="80px">
							       分组id      
							 </th> 
							<th data-column="groupCode"   data-orderable="false" class="text-center"
								width="80px" data-link='/charTest/CpdCarGroupService/id/' data-link-params='groupId' >
							       分组编码      
							 </th> 
							<th data-column="groupName"   data-orderable="false" class="text-center"
								width="80px">
							       分组名称      
							 </th> 
							<th data-column="seriesId"   data-orderable="false" class="text-center"
								width="80px">
							       车系id      
							 </th> 
							<th data-column="pinyin"   data-orderable="false" class="text-center"
								width="80px">
							       拼音      
							 </th> 
							<th data-column="groupGradeId"   data-orderable="false" class="text-center"
								width="80px">
							       分组序列id      
							 </th> 
						</tr>
					</thead>
				</table>
			</div>
		</div>
	</div>
</div>

• js取值传参给后端，通过后端提供的接口方法放在url里面

<script type="text/javascript">
   DataTablesUtil.loadAjaxTable("CpdCarGroupgrid"); 
 //前端页面调用自己写的接口：（删除）
 function delect(){
   	var row = DataTablesUtil.data.getClassData("CpdCarGroupgrid","selected");
   	for(var i=0;i<=row.length;i++){
   		$.ajax({                         
   			url:BOMF.CONST.WEB_APP_NAME+"/rest/charTest/CpdCarGroupService/deletegroudList",
   			type:"get",
   			dateType:"json",
   			data:{groupId:row[i].groupId},
   			success:function(data){
   				if(data.success){
   					quickInfo("删除成功!", "success"); 
       				DataTablesUtil.helper.reload('CpdCarBrandgrid');
   				}else{
   					quickInfo("删除失败!", "fail"); 
       				DataTablesUtil.helper.reload('CpdCarBrandgrid');
   				}
   			}
   		});
	}
 }
</script>

• service层中写个删除方法

	
	/**
	  *删除数据
	  * @Title: deletegroudList 
	  * @Description: TODO
	  * @param @param groupId 车辆组表的ID
	  * @param @param user
	  * @param @return
	  * @param @throws Exception 
	  * @return Map<String,Object>
	  * @throws
	 */
	public Map<String, Object> deletegroudList(String groupId,User user)throws Exception; 

• serviceImpl实现类中处理前端传入后台的数据

///删除
@MethodParameter(desc="deletegroudList",input="groupId,user",postName="",postType={},userParam="user",httpMethod="get")
@Transactional(rollbackFor=Exception.class)
@Override
public Map<String, Object> deletegroudList(String groupId, User user) throws Exception {
	Map<String, Object> map=new HashMap<String,Object>();
	///得到Id
	CpdCarGroup carGroup= this.bomfManager.getBeanDaoHelper().queryById(CpdCarGroup.class,groupId);
	//调用删除方法
	int des = this.getBeanDaoHelper().saveDelete(carGroup,map,user);
	if(des>0){
		map.put("success", true);
		map.put("message", "删除成功");
	}else{
		map.put("success", false);
		map.put("message", "删除失败");
	}

	return map;
}

---

好啦，小编的删除方法就到这里了，如有不懂请留言，此方法是用在微服务框架中的，可能与其它框架用法不同，但是方法都是一样的