Using ajax to achieve multiple deletion and front and back interaction

/*Multiple deletion. The following code is written by myself in springCloud,

But the methods are the same. If you understand them, you will*/
  • The JSP page is as follows:
<%@ 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">Query information</div>
                <div class="panel-toolbar pull-right">
                    <div class="form-inline">
                        <input title="Use group name to query car series" class="form-control" type="text" placeholder="Fuzzy search: group name"
                        data-url="/rest/charTest/CpdCarGroupService/query?queryType=page&queryName=queryList&filterQuery=true&groupName="
                        onKeyUp="DataTablesUtil.event.search(this, event, 'CpdCarGroupgrid')"/>

                        <input title="Practical Id Inquiry vehicle system" class="form-control" type="text" placeholder="Search: 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')">
                            Newly added
                        </button>
                        <button class="btn btn-danger form-control" type="button"
                            data-url="/rest/charTest/CpdCarGroupService?multi=true"
                            onclick="del(this,'table')"
                            data-id="CpdCarGroupgrid">
                            delete
                        </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">Serial number</th>
                            <th data-column="groupId"   data-orderable="false" class="text-center"
                                width="80px">
                                   Grouping id      
                             </th> 
                            <th data-column="groupCode"   data-orderable="false" class="text-center"
                                width="80px" data-link='/charTest/CpdCarGroupService/id/' data-link-params='groupId' >
                                   Block coding      
                             </th> 
                            <th data-column="groupName"   data-orderable="false" class="text-center"
                                width="80px">
                                   Group name      
                             </th> 
                            <th data-column="seriesId"   data-orderable="false" class="text-center"
                                width="80px">
                                   Vehicle system id      
                             </th> 
                            <th data-column="pinyin"   data-orderable="false" class="text-center"
                                width="80px">
                                   Pinyin      
                             </th> 
                            <th data-column="groupGradeId"   data-orderable="false" class="text-center"
                                width="80px">
                                   Packet sequence id      
                             </th> 
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
</div>
  • js values are passed to the backend, and put in the url through the interface methods provided by the backend
<script type="text/javascript">
   DataTablesUtil.loadAjaxTable("CpdCarGroupgrid"); 
 //Front end page calls the interface written by itself: (delete)
 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("Delete successful!", "success"); 
                    DataTablesUtil.helper.reload('CpdCarBrandgrid');
                }else{
                    quickInfo("Delete failed!", "fail"); 
                    DataTablesUtil.helper.reload('CpdCarBrandgrid');
                }
            }
        });
    }
 }
</script>
  • Write a delete method in the service layer
    /**
      *Delete data
      * @Title: deletegroudList 
      * @Description: TODO
      * @param @param groupId ID of the vehicle group table
      * @param @param user
      * @param @return
      * @param @throws Exception 
      * @return Map<String,Object>
      * @throws
     */
    public Map<String, Object> deletegroudList(String groupId,User user)throws Exception; 
  • The serviceImpl implementation class processes the data from the front end to the back end
/// delete
@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>();
    /// get Id
    CpdCarGroup carGroup= this.bomfManager.getBeanDaoHelper().queryById(CpdCarGroup.class,groupId);
    //Call delete method
    int des = this.getBeanDaoHelper().saveDelete(carGroup,map,user);
    if(des>0){
        map.put("success", true);
        map.put("message", "Delete successful");
    }else{
        map.put("success", false);
        map.put("message", "Delete failed");
    }

    return map;
}

OK, here's the deletion method of Xiaobian. If you don't understand, please leave a message. This method is used in the microservice framework. It may be different from other frameworks, but the method is the same

Keywords: REST JSP Java Javascript

Added by jimmyp3016 on Sat, 04 Jan 2020 01:22:04 +0200