AJAX删除和批量删除使用jquery

本文介绍如何利用jQuery的AJAX功能实现页面上的单个条目删除及批量删除功能,通过异步请求避免页面刷新,提高用户体验。
摘要由CSDN通过智能技术生成
AJAX删除
 
全选单选+ajax方法: toggle+porp(一般用在全选单选)  
prop获取属性   也可以使用attr()如需检索 HTML 属性,请使用 attr() 方法代替
思想:为了提交用的体验,我们使用异步数据操作 实现页面无刷新操作,。  ajax有很多种使用写法,第一种【在html页面写$ajax方法  url:写入后台某一个控制器的某一个方法,data:用post/get提交方式,】

ajax第一种书写方式:
$.ajax({ 
    url:'http://xxx/public/index.php/back/topic/ajaxList', 
    type:'post', 
    dataType:'json', 
    data: {apage:page},
    success:function(data){     // success成功后返回什么、、、、data是回调函数
            //console.log(data) 
    },
    error:function(){   //错误返回的数据
    
    },
    async:true      // 同步异步true、false
$("#result").html(data.page);
} 
});
}

ajax第二种方法:

删除  
	 $('.del1').click(function(){
        var id = $(this).attr("rowid");
        $.post("{:url('del')}",{id:id},function(msg){
            if(msg.num==1){
             
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
假设你的 HTML 代码如下: ```html <table id="items"> <thead> <tr> <th>选择</th> <th>名称</th> <th>操作</th> </tr> </thead> <tbody> <tr> <td><input type="checkbox" name="ids[]" value="1"></td> <td>项目 1</td> <td><button class="delete-btn" data-id="1">删除</button></td> </tr> <tr> <td><input type="checkbox" name="ids[]" value="2"></td> <td>项目 2</td> <td><button class="delete-btn" data-id="2">删除</button></td> </tr> <tr> <td><input type="checkbox" name="ids[]" value="3"></td> <td>项目 3</td> <td><button class="delete-btn" data-id="3">删除</button></td> </tr> </tbody> </table> <button id="batch-delete-btn">批量删除</button> ``` 你可以使用以下 jQuery 代码来实现批量删除: ```javascript $(function() { // 单个删除 $('.delete-btn').click(function() { var id = $(this).data('id'); if (confirm('确定要删除吗?')) { // 发送 AJAX 请求删除数据 $.ajax({ url: '/path/to/delete', type: 'POST', data: {id: id}, success: function() { // 删除行 $('tr[data-id="' + id + '"]').remove(); }, error: function() { alert('删除失败!'); } }); } }); // 批量删除 $('#batch-delete-btn').click(function() { var ids = []; $('input[name="ids[]"]:checked').each(function() { ids.push($(this).val()); }); if (ids.length == 0) { alert('请选择要删除的项目!'); return; } if (confirm('确定要删除所选项目吗?')) { // 发送 AJAX 请求删除数据 $.ajax({ url: '/path/to/batch/delete', type: 'POST', data: {ids: ids}, success: function() { // 删除行 $.each(ids, function(index, id) { $('tr[data-id="' + id + '"]').remove(); }); }, error: function() { alert('删除失败!'); } }); } }); }); ``` 在单个删除中,我们为每个删除按钮添加了一个点击事件,当用户点击该按钮时,会弹出确认对话框,询问用户是否确定要删除。如果用户确认删除,我们会发送一个 AJAX 请求,将该行数据从服务器删除,然后在页面上删除该行。 在批量删除中,我们首先获取所有被选中的复选框的值,然后检查是否至少选中了一个项目。如果没有选中任何项目,我们会弹出警告消息。如果用户确认要删除所选项目,我们会将所有选中项目的 ID 发送到服务器,服务器会将这些项目从数据库中删除,然后在页面上删除这些行。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值