使用复选框批量删除 ajax 请求发送数据

 jsp文件中的复选框

<%--使用forEach循环出checkbox复选框--%>
<c:forEach var="item" items="${cardsList}">
   <tr>
   <td><input name="cardId" type="checkbox" value="${item.id}" ></td>
        <td>${item.id}</td>
        <td>${item.cardNo}</td>
        <td><fmt:formatDate type="both" value="${item.createTime}" timeZone="UTC"/></td>
   </tr>
</c:forEach>

 

jsp文件中的button按钮   绑定了οnclick="delCardBatch()"事件，只要点击就会调用delCardBatch()方法

<button type="button" onclick="delCardBatch()" class="am-btn am-btn-default am-btn-danger" >
   <span class="am-icon-trash-o"/>解绑此卡
</button>

 

js文件中的function delCardBatch() （或者把该方法写在jsp文件的<script>标签中）

function delCardBatch() {

    if(confirm("您确定删除吗?")){

        var cardIds = $("input[name='cardId']");
        var cardIdstr = '';
        cardIds.each(function () {
            if($(this).prop("checked")){
                cardIdstr += $(this).val()+","
            }
        })

        var cardIds = cardIdstr.substring(0,cardIdstr.length-1);

        $.ajax({
            async:true,           //true异步，false同步(默认异步)
            type:'post',           //请求类型（get post）
            data:{cardId:cardIds},  //发送的数据
            dataType:'json',       //预期的服务器响应的数据类型
            url: '/card/toDeleteCard',  //数据发送到的地址
            timeout: "10000",      //超时时间（ms）
            success: function(result) {
                if(result.success){   
                    window.location.href="/card/queryCard";//用于刷新页面
                }else{
                    alert("数据异常");
                }
            }
        });
    }
}

 

后端代码实现

//controller层实现代码
@RequestMapping(value = "toDeleteCard")
    @ResponseBody   //该注解的作用是让后端返回json给对象前端
    public AjaxResult delCard(@RequestParam(value = "cardId") String cardId) {

        cardService.delCard(cardId);

        return AjaxResult.success();

    }

//cardService 中的delCard()方法
 @Transactional(rollbackFor = Exception.class)
    public void delCard(String cardId){
        String[] cardIds = cardId.split(","); //去掉数据中的逗号

        for (String temp : cardIds) {
            //删除银行卡
            cardMapper.delCard(Integer.valueOf(temp));
        }
    }

//cardMapper 中的代码
 int delCard(@Param("cardId") Integer cardId);

 

转载于:https://my.oschina.net/u/3446892/blog/1627402