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

本文展示了如何在jsp页面中实现批量删除功能。当用户点击按钮触发`delCardBatch()`方法,该方法通过Ajax异步发送POST请求,将选中的复选框对应的卡号发送到后端。后端接收到请求后,根据传入的卡号数组进行逐个删除操作,并返回处理结果。如果删除成功,前端将页面重定向到查询卡片页面。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

jsp文件中的复选框

${item.id}${item.cardNo}

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

解绑此卡

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

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);

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值