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)
  • 相关阅读:
    JavaSE 基础 第54节 继承Thread类创建线程
    flask 项目部分业务逻辑
    js生成随机的uuid
    增量式爬虫
    分布式爬虫
    scrapy 的分页爬取 CrawlSpider
    scrapy 请求传参
    scrapy增加爬取效率
    scrapy框架
    模拟登陆request-session
  • 原文地址:https://www.cnblogs.com/dxnui119/p/10881044.html
Copyright © 2011-2022 走看看