【笔记】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. sql时间戳转日期格式

    FROM_UNIXTIME(ctime, '%Y-%m-%d %H:%i:%s')

  2. [Selenium]Release in dragAndDrop doesn't work after i update the version of Selenium to 2.45.0

    在升级Selenium的版本之前,写了一段拖拽的代码,Drag and Drop 都好使的, 但是,将Selenium的版本升级到2.45.0之后,图标拖拽可以成功,释放不生效. 试了N多种解决方案都 ...

  3. 分布式理论系列（二）一致性算法：2PC 到 3PC 到 Paxos 到 Raft 到 Zab

    分布式理论系列(二)一致性算法:2PC 到 3PC 到 Paxos 到 Raft 到 Zab 本文介绍一致性算法: 2PC 到 3PC 到 Paxos 到 Raft 到 Zab 两类一致性算法(操作原 ...

  4. Socket发送文件

    .Net.cs using System; using System.Collections.Generic; using System.IO; using System.Linq; using Sy ...

  5. 从cookie中取值$.cookie(）

    从cookie中取值: var userid = $.cookie("remoteuserid");例子: function delUser() {     var table = ...

  6. Mysql--关于数值字段的比较问题

    今天在进行数据库查询的过程中,因为需要比较一条记录中两个字段的大小问题 select * from cyber_download_rate where measure_time between '20 ...

  7. CWnd::MoveWindow 详解

    CWnd::MoveWindow void MoveWindow( int x, int y, int nWidth, int nHeight, BOOL bRepaint = TRUE ); voi ...

  8. ZOJ3696 Alien's Organ 2017-04-06 23:16 51人阅读 评论(0) 收藏

    Alien's Organ Time Limit: 2 Seconds      Memory Limit: 65536 KB There's an alien whose name is Marja ...

  9. 通过HttpClient请求webService

    通过HttpClient请求webService 由于服务端是用webService开发的,android要调用webService服务获取数据,这里采用的是通过HttpClient发送post请求, ...

  10. Oracle EBS不能正常启动的解决方案 > Jinitiator 乱码

    问题1:使用IE浏览器(IE6 IE7 IE8)可以登录EBS,但在打开EBS的WIN Form界面里,IE自动关闭或报错,或是卡住不动 原因1: oracle EBS自带安装的JInitiator ...