sweetalert是一个漂亮的弹窗插件，使用它可以完成各种炫酷的弹窗效果

链接：sweetalert

实例

删除演示

urls.py

from django.contrib import admin

from django.urls import path

from app1 import views

urlpatterns = [

    path('admin/', admin.site.urls),

    path('index/', views.index),

]

views.py
```python
def index(request):
return render(request, 'index.html')

<br>

```html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>个人主页</title>

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

    <script src="/static/js/sweetalert-dev.js"></script>

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

</head>

<body>

<button class="btn">点我删除</button>

<script>

    $('.btn').on('click', function () {

        swal({

            //提示的标题

            title: '确定删除吗？',

            //提示的文本

            text: '你将无法恢复该文件',

            //类型：警告，还有success,error和info

            type: 'warning',

            //显示取消按钮

            showCancelButton: true,

            //确认按钮颜色

            confirmButtonColor: '#DD6B55',

            //确认按钮内文本

            confirmButtonText: '确定删除',

            //取消按钮内文本

            cancelButtonText: '取消删除',

            closeOnConfirm: false,

            closeOnCancel: false,

        }, function (isConfirm) {

            if (isConfirm) {

                //点击确认按钮之后进行的操作，这里success不能改

                swal('删除', '你的文件已经被删除', 'success');

            } else {

                //点击取消按钮之后进行的操作，这里error不能改

                swal('取消', '你的文件是安全的', 'error');

            }

        })

    })

</script>

</body>

</html>

显示效果

### 删除表格
修改views，增加一个delete函数
```python
def delete(request):
if request.method == 'POST':
response = {'"status': True}
return HttpResponse(json.dumps(response))
else:
return HttpResponse('非法请求')
```


修改index.html，定义一个table，模拟删除操作

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>个人主页</title>

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

    <script src="/static/js/sweetalert-dev.js"></script>

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

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

</head>

<body>

{#<button class="btn">点我删除</button>#}

{% csrf_token %}

<div class="container">

    <div class="row">

        <div class="col-md-8 col-md-offset-2">

            <h3>数据展示</h3>

            <table class="table table-hover table-bordered">

                <thead>

                <tr>

                    <th>#</th>

                    <th>First Name</th>

                    <th>Last Name</th>

                    <th>Username</th>

                    <th>operation</th>

                </tr>

                </thead>

                <tbody>

                <tr>

                    <th scope="row">1</th>

                    <td>Mark</td>

                    <td>Otto</td>

                    <td>@mdo</td>

                    {# line_num自定义属性，方便获取序号 #}

                    <td><input type="button" class="btn btn-danger" data-toggle="modal" line_num="1" value="delete"/>

                    </td>

                </tr>

                <tr>

                    <th scope="row">2</th>

                    <td>Jacob</td>

                    <td>Thornton</td>

                    <td>@fat</td>

                    <td><input type="button" class="btn btn-danger" data-toggle="modal" line_num="2" value="delete"/>

                    </td>

                </tr>

                <tr>

                    <th scope="row">3</th>

                    <td>Larry</td>

                    <td>the Bird</td>

                    <td>@twitter</td>

                    <td><input type="button" class="btn btn-danger" data-toggle="modal" line_num="3" value="delete"/>

                    </td>

                </tr>

                </tbody>

            </table>

        </div>

    </div>

</div>

<script>

    $('.btn-danger').click(function () {

        let line_num = $(this).attr('line_num');

        //在ajax的回调函数的外面用一个变量记录下来，方便ajax的回调函数使用

        let _this = $(this);  //选择删除的那一行

        let csrf = $("[name='csrfmiddlewaretoken']").val();

        swal({

            title: '亲，您确定删除吗？',

            text: '删除可就找不回来了哦！',

            //试一试不同type有何区别

            type: 'warning',

            showCancelButton: true,

            confirmButtonColor: '#ff0000',

            confirmButtonText: '确定',

            cancelButtonText: '取消',

            closeOnConfirm: false,

            closeOnCancel: false,

        }, function (isConfirm) {

            console.log(isConfirm);

            if (isConfirm) {

                $.ajax({

                    url: '/delete/',

                    type: 'post',

                    data: {

                        "id": line_num,

                        csrfmiddlewaretoken: csrf,

                    },

                    success: function (data) {

                        data = JSON.parse(data);

                        if (data.status) {

                            console.log(data.status);

                            //第一个参数是title，第二个参数是text，第三个是type

                            swal('删除成功！', '记录已经被删除', 'success');

                            //删除一行

                            _this.parent().parent().remove();

                        } else {

                            swal('删除失败！', '删除失败，请重试!', 'error');

                            //跳转首页

                            {#window.location.href = '/index/';#}

                        }

                    }

                })

            } else {

                swal('取消！', '你的数据是安全的', 'error')

            }

        })

    })

</script>

</body>

</html>

## 小结
### sweet语法
```javascript
swal({
参数1：值1，
参数2：值2，
}, function (isConfirm) {
if (isConfirm) {
swal(title, text, type);
else {
swal(title, text, type);
}
})
```
### 参数说明
- title: 提示的标题
- text: 提示的文本
- type: 类型
- showCancelButton: 是否显示取消按钮
- confirmButtonColor：确认按钮颜色
- confirmButtonText： 确认按钮文本
- cancelButtonText： 取消按钮文本
- closeOnConfirm：点击确认之后是否自动关闭
- closeOnCancel：点击取消之后是否自动关闭

sweetalert插件的使用的更多相关文章

  1. zTree和SweetAlert插件初探

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

  2. 弹出框sweetalert插件的简单使用

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. Django(序列化、SweetAlert插件)

    day72 参考:https://www.cnblogs.com/liwenzhou/p/8718861.html#autoid-6-1-2 前端序列化 后端序列化 day73中 补充一个SweetA ...

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

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

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

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

  6. sweetalert插件使用

    内容: 1.插件介绍 2.插件使用 1.插件介绍 SweetAlert是一个JS插件,能够完美替代JS自带的alert弹出框,并且功能强大,设计优美 使用这个很方便,推荐使用这个插件来写alert s ...

  7. django系列6--Ajax06 使用插件,Sweet-Alert插件

    使用SweetAlert插件 GitHub上的下载链接 下载完成后放入django项目静态目录下,在html文件中引入静态文件,下面是script部分 $(".btn-danger" ...

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

    [笔记]AJAX+SweetAlert插件实现删除操作 Django AJAX SweetAlert  展示 SweetAlert 插件介绍 SweetAlert 是一个 JS 插件,能够完美替代 J ...

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

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

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

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

随机推荐

  1. 用keras实现基本的图像分类任务

    数据集介绍 fashion mnist数据集是mnist的进阶版本,有10种对应的结果 训练集有60000个,每一个都是28*28的图像,每一个对应一个标签(0-9)表示 测试集有10000个 代码 ...

  2. 【BZOJ3215/3216】[ZJOI2013]话旧/话旧2（组合数学，动态规划）

    [BZOJ3215/3216][ZJOI2013]话旧/话旧2(组合数学,动态规划) 题面 BZOJ3215 BZOJ3216 题解 先解决\(3216\),求的是最小值为\(0\). 因为起点就是\ ...

  3. VSIX 插件右键菜单(2)

    编译项目然后发布 // 获取当前右击的活动项目 EnvDTE.Project activeProj = ProjectHelpers.GetActiveProject(); // 获取 编译选项 Re ...

  4. Jupyter ~ 像写文章般的 Coding （附：同一个ipynb文件，执行多语言代码）

    前面用了好久Notebook来交互式编程了,这次说说几个其他的选项: Notebook Markdown 这次选Markdown模式(关于Markdown基础可以看之前写的Markdown Base) ...

  5. 洛谷P4769 冒泡排序

    n <= 60w,∑n <= 200w,1s. 解:首先有个全排列 + 树状数组的暴力. 然后有个没有任何规律的状压...首先我想的是按照大小顺序来放数,可以分为确定绝对位置和相对位置两种 ...

  6. 关于react-native项目在MacBookPro环境下打包成IPA

    苹果开发者打包是需要接入公司的开发者账户里面的.看是企业账户还是什么,具体我不太清楚. 不过打包的方法倒是大同小异. 我们一起新建项目,先跑起来这个项目 npm install -g yarn rea ...

  7. webpack中babel配置 --- runtime-transform和babel-pollfill

    webpack - babel配置 babel是一个javascript编译器,是前端开发中的一个利器.它突破了浏览器实现es标准的限制,使我们在开发中可以使用最新的javascript语法. 通过构 ...

  8. 认识Jmeter工具

    1.Apache jmeter 是一个100%的纯java桌面应用,是Apache组织开发的基于java的压力测试工具.它最初被设计用于Web应用测试但后来扩展到其他测试领域,可以用于对静态的和动态的 ...

  9. TreeView CheckBox勾选联动

    http://www.cnblogs.com/excellently/p/TreeViewCheckBox.html 在C# Winform项目中用到了TreeView控件,并且需要勾选的功能.父子节 ...

  10. 《Java程序设计》 第一周学习总结

    20175313 <Java程序设计>第一周学习总结 教材学习内容总结 了解Java的四个特点 学习JDK的安装以及系统环境变量的设置 掌握Java源文件命名.编译.运行 熟悉git的常用 ...