Django14-Ajax刪除按鈕動態效果

經過ajax實現刪除按鈕動態刪除和提示警告的效果

需使用sweetalert，地址：https://sweetalert.js.org/guides/，導入方式有3種：
一、下載安裝sweetalert
npm install sweetalert --save

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

三、複製免安裝文件到本地保存
右鍵點擊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)