如何用ajax实现删除功能,jQuery+ajax实现批量删除功能完整示例

本文实例讲述了jquery+ajax实现批量删除功能。分享给大家供大家参考,具体如下:

效果展示:

586dda7562d47c78fbaae813e3f99035.gif

完整代码如下:

ding jianlong html

批量删除

id标题

10001标题110002标题210003标题310004标题410005标题5

/*批量选中的效果*/

$('input:checkbox[name="selectall"]').click(function(){

if($(this).is(':checked')){

$('input:checkbox').each(function(){

$(this).prop("checked",true);

});

}else{

$('input:checkbox').each(function(){

$(this).prop("checked",false);

});

}

});

/*获取ids,批量删除*/

function batch_del() {

var ids = '';

$('input:checkbox').each(function(){

if(this.checked == true){

ids += this.value + ',';

}

});

//layer.alert(ids);return;

//下面的ajax根据自己的情况写

layer.confirm('批量删除后不可恢复,谨慎操作!', {icon: 7, title: '警告'}, function (index) {

$.ajax({

type: 'post',

url: '你的url地址?ids=' + ids,

data: {"1": "1"},

datatype: 'json',

success: function (data) {

if (data.code == 200) {

$(obj).parents("tr").remove();

layer.msg(data.message, {icon: 1, time: 1000});

} else {

layer.msg(data.message, {icon: 2, time: 3000});

}

},

error: function (data) {

console.log(data.msg);

},

});

});

}

感兴趣的朋友可以使用在线html/css/javascript代码运行工具:http://tools.jb51.net/code/htmljsrun测试上述代码运行效果。

希望本文所述对大家jquery程序设计有所帮助。

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是一个简单的基于 jQueryAjax 实现省市县三级联动的示例代码: HTML 代码: ```html <select id="province"> <option value="">请选择省份</option> </select> <select id="city"> <option value="">请选择城市</option> </select> <select id="district"> <option value="">请选择区县</option> </select> ``` JavaScript 代码: ```javascript $(function() { // 加载省份列表 $.ajax({ url: 'province.php', type: 'GET', dataType: 'json', success: function(data) { $.each(data, function(index, province) { $('#province').append('<option value="' + province.id + '">' + province.name + '</option>'); }); } }); // 加载城市列表 $('#province').change(function() { var provinceId = $(this).val(); if (provinceId != '') { $.ajax({ url: 'city.php', type: 'GET', dataType: 'json', data: {provinceId: provinceId}, success: function(data) { $('#city').empty().append('<option value="">请选择城市</option>'); $('#district').empty().append('<option value="">请选择区县</option>'); $.each(data, function(index, city) { $('#city').append('<option value="' + city.id + '">' + city.name + '</option>'); }); } }); } else { $('#city').empty().append('<option value="">请选择城市</option>'); $('#district').empty().append('<option value="">请选择区县</option>'); } }); // 加载区县列表 $('#city').change(function() { var cityId = $(this).val(); if (cityId != '') { $.ajax({ url: 'district.php', type: 'GET', dataType: 'json', data: {cityId: cityId}, success: function(data) { $('#district').empty().append('<option value="">请选择区县</option>'); $.each(data, function(index, district) { $('#district').append('<option value="' + district.id + '">' + district.name + '</option>'); }); } }); } else { $('#district').empty().append('<option value="">请选择区县</option>'); } }); }); ``` 省份列表数据接口(province.php)返回 JSON 数据格式: ```json [ {"id": "110000", "name": "北京市"}, {"id": "120000", "name": "天津市"}, // 省份数据... ] ``` 城市列表数据接口(city.php)根据省份 ID 返回 JSON 数据格式: ```json [ {"id": "110100", "name": "北京市"}, {"id": "110200", "name": "县城市"}, // 城市数据... ] ``` 区县列表数据接口(district.php)根据城市 ID 返回 JSON 数据格式: ```json [ {"id": "110101", "name": "东城区"}, {"id": "110102", "name": "西城区"}, // 区县数据... ] ``` 以上是一个简单的 jQueryAjax 实现省市县三级联动的示例代码,你可以根据自己的需求进行修改和扩展。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值