【笔记】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. Maven项目下java.lang.ClassNotFoundException常规解决办法

    网上很多要修改.class .project的比较麻烦有时候还不一定管用.下面的方法适合于项目用已经引用了jar,但是运行时却ClassNotFound,请用如下方法试试: 严重: Error con ...

  2. GCT系统阶段后三十题的解析(转)

    http://blog.sina.com.cn/s/blog_3e66af46010195w9.html 71. Some old people don’t like pop songs becaus ...

  3. sqlserver2012 清除日志

    1. backup log wwgl_demo to disk='D:\DATA_BACKUP\2017-07-19.log' 2. 右键数据库-->任务-->收缩-->文件     ...

  4. 从Objective-C到Swift，你必须会的（一）#pragma mark

    在Objective-C里,为了让代码组织的有序也方便用control+6的快捷键在Xcode中查找,所以出现了一个大家都很熟悉的东东.这就是:#prama mark. #pragma mark  但 ...

  5. ZSTU4270 同源数 2017-03-22 14:34 82人阅读 评论(0) 收藏

    4270: 同源数 Time Limit: 3 Sec  Memory Limit: 128 MB Submit: 1284  Solved: 224 Description 如果x和y的质因子集合完 ...

  6. CAS实战の获取多用户信息

    先列出版本号: 服务端版本:cas server 4.0.0 客户端版本:cas client 3.3.3 cas server step1:先将primaryPrincipalResolver be ...

  7. 咏南中间件当作WEB SERVER使用方法

    咏南中间件当作WEB SERVER使用方法 1)开启咏南中间件 2)浏览器打开http://localhost:5566/web?page=echo.html

  8. java 传参数时 类型后跟 3个点 "..." 的意义

    对照代码和运行结果便知"..." 的意义 import java.util.ArrayList; public class StringDemo { public static v ...

  9. Postgresql 日志收集

    PG安装完成后默认不会记录日志,必须修改对应的(${PGDATA}/postgresql.conf)配置才可以,这里只介绍常用的日志配置. 1.logging_collector = on/off - ...

  10. .NET框架源码解读之启动CLR

    前面提到在SSCLI环境里运行.NET程序的时候,执行的命令类似java程序的执行过程,即通过clix程序解释执行.net程序.这个过程看起来跟在windows环境下执行.net程序表面上看起来不一样 ...