Django14-Ajax删除按钮动态效果

通过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)

 

转载于:https://www.cnblogs.com/dxnui119/p/10881044.html