如何使用ajax實現多條刪除及前後端交互

/*多條刪除，以下代碼是本人在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;
}

---

好啦，小編的刪除方法就到這裏了，如有不懂請留言，此方法是用在微服務框架中的，可能與其它框架用法不同，但是方法都是一樣的