【笔记】AJAX+SweetAlert插件实现删除操作
展示
SweetAlert 插件介绍
SweetAlert 是一个 JS 插件，能够完美替代 JS 自带的 alert 弹出框，并且功能强大，设计优美。
中文官网：SweetAlert中文
下载地址：sweetalert 项目 Github
使用方式
-
引入：
<script src="/static/sweetalert/sweetalert.min.js"></script> -
基本使用
在 JS 代码中使用 swal 方法。常见方式：
-
高级用法
swal({ 参数键值对 },function () { 执行的操作 })常用参数：
- title
- text
- showCancelButton
- confirmButtonClass
- confirmButtonText
- cancelButtonText
- closeOnConfirm
- showLoaderOnConfirm
示例所用 HTML 代码
注意：
- 样式用的是 bootstrap 样式类
- 图标用的是 fontawesome
- 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
