zoukankan      html  css  js  c++  java
  • 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)
  • 相关阅读:
    分享一些优化博客的心得
    HTTP相关整理(上)
    正则&highlight高亮实现(干货)
    通过一个demo了解Redux
    升级ChinaCock10.3.3激情版3注意事项
    解决uniDAC超时问题:已超过了锁请求超时时段。
    kbmMWSmartBind实现ListView绑定数据集进阶篇(一)
    通过输出日志到文件来检查app闪退原因
    VertScrollBox不能滑动
    使用kbmMW SmartBinding经验几则
  • 原文地址:https://www.cnblogs.com/dxnui119/p/10881044.html
Copyright © 2011-2022 走看看