通过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 2019-05-17 14:15  longfei2021  阅读(286)  评论(0编辑  收藏  举报