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. 搭建web定时任务管理平台

    需要安装mysql及gityum -y install git mysql-server 下载安装go官网:https://golang.org/dl/wget https://redirector. ...

  2. 洛谷P4907【CYH-01】小奔的国庆练习赛 :$A$换$B$ $problem$(DFS,剪枝)

    洛谷题目传送门 顺便提一下题意有一个地方不太清楚,就是如果输出No还要输出最少需要添加多少张牌才能满足要求.蒟蒻考完以后发现四个点Too short on line 2... 比较需要技巧的搜索 既然 ...

  3. gulp与webpack的区别

    gulp  gulp强调的是前端开发的工作流程,我们可以通过配置一系列的task,定义task处理的事务(例如文件压缩合并.雪碧图.启动server.版本控制等),然后定义执行顺序,来让gulp执行这 ...

  4. js中的变量提升与函数提升

    先看看一个简单的代码 var str='Hello World'; alert(str);//弹出 Hello World 再看一段代码: var v='Hello World'; (function ...

  5. luogu4162 最长距离 (dijkstra)

    相邻格子连双向边,如果一个点有障碍,那进它的边权就是1,否则是0 这样的话,两点间的最短路+[起始点有障碍],就是从一个点走到另一个需要清除的障碍的个数 求出最短路后枚举这两个点就可以了 然而30*3 ...

  6. poj 3414 Pots(bfs+输出路径)

    Description You are given two pots, having the volume of A and B liters respectively. The following ...

  7. Shiro中的Rememberme后出现浏览器500错误

    问题详述:在Shiro中添加Remember me功能后,只要勾选Remember me选项为true的时候,浏览器就会跳转到一个不可达页面,并且在Chrome中显示HTTP 500错误. 问题追踪: ...

  8. hdu 1907 (尼姆博弈)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1907 Problem Description Little John is playing very ...

  9. Spring Boot 1.X和2.X优雅重启实战

    纯洁的微笑 今天 项目在重新发布的过程中,如果有的请求时间比较长,还没执行完成,此时重启的话就会导致请求中断,影响业务功能,优雅重启可以保证在停止的时候,不接收外部的新的请求,等待未完成的请求执行完成 ...

  10. 使用jquery.pjax实现SPA单页面应用

    前面文章介绍了前端路由简单实现和Pjax入门方面的文章,今天来分享一个单页面应用神器jquery.pjax.js. HTML 我们准备一个加载div#loading,默认隐藏,ajax请求的时候才显示 ...