【笔记】AJAX+SweetAlert插件实现删除操作

Django AJAX SweetAlert 

展示

SweetAlert 插件介绍

SweetAlert 是一个 JS 插件，能够完美替代 JS 自带的 alert 弹出框，并且功能强大，设计优美。

中文官网：SweetAlert中文

下载地址：sweetalert 项目 Github

使用方式

  1. 引入：

    <script src="/static/sweetalert/sweetalert.min.js"></script>

  2. 基本使用
    在 JS 代码中使用 swal 方法。常见方式：

     

  3. 高级用法

    swal({
    
    参数键值对
    
},function () {
    
    执行的操作
    
})

    常用参数：

    • title
    • text
    • showCancelButton
    • confirmButtonClass
    • confirmButtonText
    • cancelButtonText
    • closeOnConfirm
    • showLoaderOnConfirm

示例所用 HTML 代码

注意：

  1. 样式用的是 bootstrap 样式类
  2. 图标用的是 fontawesome
  3. setupajax.js 是自己编写引入的，用于处理 csrf_token 问题，代码请见：
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>人员管理</title>

    <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">

    <link rel="stylesheet" href="/static/sweetalert/sweetalert.css">

    <link rel="stylesheet" href="/static/fontawesome/css/font-awesome.min.css">

    <style>

        .sweet-alert>h2 {

            padding-top: 15px;

        }

    </style>

</head>

<body>

<div class="container">

    <div class="panel panel-primary">

        <div class="panel-heading">

            <h3 class="panel-title">人员管理</h3>

        </div>

        <div class="panel-body">

            <table class="table table-bordered">

                <thead>

                <tr>

                    <th>序号</th>

                    <th>ID</th>

                    <th>姓名</th>

                    <th>年龄</th>

                    <th>操作</th>

                </tr>

                </thead>

                <tbody>

                {% for p in persons %}

                    <tr>

                        <td>{{ forloop.counter }}</td>

                        <td>{{ p.id }}</td>

                        <td>{{ p.name }}</td>

                        <td>{{ p.age }}</td>

                        <td>

                            <button class="btn btn-danger del"><i class="fa fa-trash-o">删除</i></button>

                        </td>

                    </tr>

                {% endfor %}

                </tbody>

            </table>

        </div>

    </div>

</div>

<script src="/static/jquery-3.3.1.js"></script>

<script src="/static/sweetalert/sweetalert.min.js"></script>

<script src="/static/setupajax.js"></script>

<script>

    // 绑定删除按钮

    $(".del").on("click", function () {

        // swal("标题", "内容", "success");

        // 获取要删除数据的id

        // 获取表格当前行的标签对象

        var $trEle = $(this).parent().parent();

        var delId = $trEle.children().eq(1).text();

        swal({

            title: "你确定要删除吗？",

            text: "一旦删除就找不回来了",

            type: "warning",

            showCancelButton: true,

            confirmButtonClass: "btn-warning",

            confirmButtonText: "确认",

            cancelButtonText: "取消",

            closeOnConfirm: false,

            showLoaderOnConfirm: true

        },

            function () {

                // 通过Ajax向后端传递数据

                $.ajax({

                    url: "/delete/",

                    type: "post",

                    data: {"id":delId},

                    success:function (arg) {

                        swal(arg, "你可以跑路了", "success");

                        // 删除要删除数据所在的标签

                        $trEle.remove();

                    }

                });

            });

    })

</script>

</body>

</html>

示例所用 views.py

def persons(request):

    all_persons = models.Person.objects.all()

    return render(request, "persons.html", {"persons": all_persons})

def delete(request):

    import time

    time.sleep(4)

    delId = request.POST.get("id")

    models.Person.objects.filter(id=delId).delete()

参考：https://www.cnblogs.com/liwenzhou/p/8718861.html

GitHub地址：https://github.com/protea-ban/oldboy/tree/master/s9day72/ajaxdemo

【笔记】AJAX+SweetAlert插件实现删除操作的更多相关文章

  1. 使用Ajax实现的批量删除操作（C#）

    今天做了一个简单的批量删除操作,虽然简单,但是很多问题出现,终究还是技术不够熟练. 现在在这里跟大家分享一下.仅供学习... 1.在前台获取用户点击的信息id,把这里id封装到一个数组里面:(rows ...

  2. python 全栈开发，Day75(Django与Ajax,文件上传,ajax发送json数据,基于Ajax的文件上传,SweetAlert插件)

    昨日内容回顾 基于对象的跨表查询 正向查询:关联属性在A表中,所以A对象找关联B表数据,正向查询 反向查询:关联属性在A表中,所以B对象找A对象,反向查询 一对多: 按字段:xx book ----- ...

  3. {Django基础七之Ajax} 一 Ajax简介 二 Ajax使用 三 Ajax请求设置csrf_token 四 关于json 五 补充一个SweetAlert插件(了解)

    Django基础七之Ajax 本节目录 一 Ajax简介 二 Ajax使用 三 Ajax请求设置csrf_token 四 关于json 五 补充一个SweetAlert插件(了解) 一 Ajax简介 ...

  4. Django与Ajax,文件上传,ajax发送json数据,基于Ajax的文件上传,SweetAlert插件

    一.Django与Ajax AJAX准备知识:JSON 什么是 JSON ? JSON 指的是 JavaScript 对象表示法(JavaScript Object Notation) JSON 是轻 ...

  5. {Django基础七之Ajax} 一 Ajax简介 二 Ajax使用 三 Ajax请求设置csrf_token 四 关于json 五 补充一个SweetAlert插件(了解)

    {Django基础七之Ajax} 一 Ajax简介 二 Ajax使用 三 Ajax请求设置csrf_token 四 关于json 五 补充一个SweetAlert插件(了解)   Django基础七之 ...

  6. [原创]java WEB学习笔记24：MVC案例完整实践(part 5)---删除操作的设计与实现

    本博客为原创:综合 尚硅谷(http://www.atguigu.com)的系统教程(深表感谢)和 网络上的现有资源(博客,文档,图书等),资源的出处我会标明 本博客的目的:①总结自己的学习过程,相当 ...

  7. 在分页中，删除操作后，AJAX重载刷新当前页

    需求 分页中,在 删除 和 编辑 完成后,AJAX重载刷新 当前页 ,而不是跳转到 第一页 实现步骤 添加两个的 input 控件,用来存储 当前页数 和 记录总条数(非必须,能有方法获取到这两个值即 ...

  8. Android笔记——对系统通话记录的删除操作

    手机通话记录是保存在数据库中的,位置:  /data/data/com.android.providers.contacts/databases/calllog.db ,表名:calls 这张表中有个 ...

  9. zTree和SweetAlert插件初探

    1.zTree插件简介 zTree是一个依靠 jQuery实现的多功能“树插件”.优异的性能.灵活的配置.多种功能的组合是zTree最大优点.专门适合项目开发,尤其是树状菜单.树状数据的Web显示.权 ...

随机推荐

  1. Java方法_数组

    /* 方法:完成特定功能的代码块.   注意:在很多语言里面有函数的定义,而在Java中函数被称为方法.   方法格式: 修饰符 返回值类型 方法名(参数类型 参数名1,参数类型 参数名2...) { ...

  2. 电商商品规则属性sku 工具类

    /** * 商品模块: * 使用:var SKU = sku.init({ id:'sku', item: item, data:data }); * @config item = [{"i ...

  3. （连通图 缩点 强联通分支）Popular Cows -- poj --2186

    http://poj.org/problem?id=2186 Description Every cow's dream is to become the most popular cow in th ...

  4. 企业搜索引擎开发之连接器connector（二十三）

    我们在前面的文章已经看到,ConnectorCoordinatorImpl类也实现了ChangeHandler接口,本文接下来分析实现该接口的作用 class ConnectorCoordinator ...

  5. Java动态代理（一）动态类Proxy的使用

    1.什么是动态代理? 答:动态代理可以提供对另一个对象的访问,同时隐藏实际对象的具体事实.代理一般会实现它所表示的实际对象的接口.代理可以访问实际对象,但是延迟实现实际对象的部分功能,实际对象实现系统 ...

  6. spring+ibatis事务管理配置

    <!-- 配置事务管理器 --> <bean id="transactionManager"         class="org.springfram ...

  7. tomcat-java_opts设置说明

    The JAVA_OPTS environment variable can be used to specify additional arguments to the JVM JBoss will ...

  8. Ubuntu add-apt-repository: command not found

    在Ubuntu下,时不时会有这个错误的. add-apt-repository: command not found 这个是缺少程序,安装一下就可以了.只是不知道安装的名字. 按以下命令走一趟就可以的 ...

  9. iOS开发网络篇—GET请求和POST请求的说明与比较

    1.GET请求和POST请求简单说明 1.1 创建GET请求 // 1.设置请求路径 NSString *urlStr = [NSString stringWithFormat:@"http ...

  10. 激活IDEA,pycharm方法

    1.修改hosts文件将0.0.0.0 account.jetbrains.com添加到hosts文件最后,注意hosts文件无后缀,如果遇到无法修改或权限问题,可以采用覆盖的方法去替换hosts文件 ...