【笔记】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. msdn 硬盘

    https://msdn.microsoft.com/library/windows/hardware/ff566204 Returns the ATA-2 identify data, the Se ...

  2. [SoapUI]怎样获取上一个Test Step的名字

    def currentStepInd = context.currentStepIndex def previousStep = testRunner.testCase.getTestStepAt(c ...

  3. 使用c语言实现在linux下的openssl客户端和服务器端编程

    使用c语言实现在linux下的openssl客户端和服务器端编程 摘自:https://www.cnblogs.com/etangyushan/p/3679457.html 前几天组长让我实现一个使用 ...

  4. 关闭Found duplicated code

    IDEA中的这个“发现重复代码 - Found duplicated code“的这个提示甚是烦躁. Settings —> Editor —> Inspections —> Gen ...

  5. ie8开发人员工具无法使用，按f12任务栏里出现任务，但是窗体不弹出

    楼主解决了么,刚出现你这样的问题,找了N久,终于解决了,他娘的,偏方啊任务栏不是出现那个箭头么,点击后没反应是吧在缩略图上点右键-最大化,然后就出来了,ctrl+p反正是可以出来调试模式 神人哪,IE ...

  6. android studio导入项目时一直在Grandle Build Running

    在使用AS开发安卓应用程序的时候经常会遇到Gradle build running一直在运行甚至卡死的情况,解决方法如下: 方法1:(亲测有效) 1.在C:\User\<用户名>\.gra ...

  7. C++中函数模版与类模版

    1.什么是模板? (1)可以这样来解释这个问题,例如当我们需要定义多个函数,而这个函数功能其实都是一样的,例如两个数相加的函数, 只是相加的两个数的类型不相同而已,这就导致我们需要定义多个函数:当我们 ...

  8. fakeapp, faceswap, deepfacelab等deepfakes换脸程序的简单对比

    https://deepfakes.com.cn/index.php/95.html https://www.cnblogs.com/zackstang/p/9011753.html

  9. Android UI 之 ListView

    一.在代码中创建(不适用XML布局文件) 1.创建一个项目:ListViewLearn 2.修改MainActivity,继承于ListActivity 3.创建一个String数组,用来保存List ...

  10. R12 查询EBS用户相关SQL

    --R12查询EBS在线用户SQL SELECT U.USER_NAME,       APP.APPLICATION_SHORT_NAME,       FAT.APPLICATION_NAME,  ...