随笔 - 139  文章 - 0 评论 - 0 阅读 - 33825
< 2025年3月 >
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5

通过ajax实现删除按钮动态删除和提示警告的效果

需使用sweetalert,地址:https://sweetalert.js.org/guides/,导入方式有3种:
1、下载安装sweetalert
npm install sweetalert --save

2、前端页面引入免费的CDN加速支持地址:
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>

3、复制免安装文件到本地保存
右键点击unpkg,选择链接另存为,将文件保存为本地sweetalert.min.js文件
并在前端页面引用<script src="{% static 'js/sweetalert.min.js' %}"></script>

前端页面删除按钮只需设置class='del'即可
<a class="del" del_obj="{{user}}" del_id="{{ crm.pk }}"><button class="btn btn-danger">删除</button></a>

js文件

crm_js.js

复制代码
$('.del').click(function () {
    swal({
        title: "Are you sure?",
        text: "删除就找不回来了哦!",
        icon: "warning",
        buttons: true,
        dangerMode: true,
    }).then((willDelete) => {
        if (willDelete) {
            //  发请求到后端删除数据
            $.ajax({
        //拼接要访问的url地址
                url: '/crm/' + $(this).attr('del_obj') + '/del/' + $(this).attr('del_id'),
                type: 'get',
                success: (res) => {
            //如果后端objDel函数返回ret中的'status'值为1,则表示删除失败,如果返回值为0,则表示删除成功
                    if (res.status) {
                        swal('删除错误!');
                    } else {
                        // 删除成功
                        swal("嗖!删除成功!", {
                            icon: "success",
                        });
                        // 在页面删除对应数据
                        $(this).parent().parent().remove()
                    }
                }
            })
        } else {
            swal("好险,幸好没删除~~");
        }
    });
});
复制代码

views.py文件

复制代码
# 对象删除,通过ajax删除
def objDel(request, obj, pk):
    ret = {'status': 0, 'msg': None}
    
    try:
        obj_class = getattr(models, obj.capitalize())
        obj_class.objects.filter(pk=pk).delete()
    except Exception as e:
        ret['status'] = 1
        ret['msg'] = str(e)
    return JsonResponse(ret)
复制代码

 

posted on   longfei2021  阅读(299)  评论(0编辑  收藏  举报
编辑推荐:
· AI与.NET技术实操系列:基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
阅读排行:
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 25岁的心里话
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· 闲置电脑爆改个人服务器(超详细) #公网映射 #Vmware虚拟网络编辑器
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用
点击右上角即可分享
微信分享提示