【笔记】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. Laravel 配置文件操作方法

    1)laravel 的所以配置文件都在根目录下的 config 目录里,直接看一个配置文件的名字就知道是做什么的了,这里不说了 2)读取配置的方法 $value = config('app.timez ...

  2. cucumber安装步骤

    #Start Guide##Environment###1. Install Ruby Verify your installation by running ruby -v in a termina ...

  3. PHPCMS V9 模块开发 二次开发实例 留言本

    鄙人实现了PHPCMS V9 产品开发权威指南(2011官方最新版).doc中的留言板实例,并加上模块安装和卸载功能, 程序可以运行,但只实现基本功能,目的是想让和我一样徘徊在PHPCMS门口不知道从 ...

  4. Gym 101201G Maximum Islands (最大独立集)

    题意:给定一个图,L代表陆地,W代表水,C表示不确定,问你最多有多少岛. 析:首先给定的L周围必须是是W,只有这样才是最优的,因为如果是L,那么还得有另外的W来包围,不是最优的,那么剩下的就剩下C了, ...

  5. CSS —— line-height详解

    本文导读:“行高“指一行文子的高度,具体来说是指两行文子间基线间的距离.在CSS,line-height被用来控制行与行之间的垂直距离.line-height 属性会影响行框的布局.在应用到一个块级元 ...

  6. 動態修改 XML 欄位

    /* -- for test DECLARE @content VARCHAR(50) DECLARE @folioId VARCHAR(50) DECLARE @opinionType VARCHA ...

  7. （3）-JSONObject的过滤设置

    我们通常对一个json串和java对象进行互转时,经常会有选择性的过滤掉一些属性值.例如下面的类:   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 ...

  8. 菜鸟去重复之Sql

    前言 本文主要是总结平时工作学习中遇到的使用Sql Server的去除重复的心得体会. 由于平时工作使用Sql并不多,此次在写本文的测试过程中,就遇到了问题,如能有幸得到高手点播,将不胜感激. 高手可 ...

  9. 关于My Sql update语句不能用子查询的解决办法

    在使用My Sql数据库语法操作update时,第一时间想到的是一下写法: UPDATE purchase_request_detail SET convert_to_voucher_id=, con ...

  10. 开源应用框架BitAdminCore：更新日志20180817

    索引 NET Core应用框架之BitAdminCore框架应用篇系列 框架演示:http://bit.bitdao.cn 框架源码:https://github.com/chenyinxin/coo ...