$(".btn-danger").on("click", function () {
swal({
title: "你确定要删除吗？",
text: "删除可就找不回来了哦！",
type: "warning",
showCancelButton: true,
confirmButtonClass: "btn-danger",
confirmButtonText: "删除",
cancelButtonText: "取消",
closeOnConfirm: false
},
function () {
var deleteId = $(this).parent().parent().attr("data_id");
$.ajax({
url: "/delete_book/",
type: "post",
data: {"id": deleteId},
success: function (data) {
if (data.status === 1) {
swal("删除成功!", "你可以准备跑路了！", "success");
} else {
swal("删除失败", "你可以再尝试一下！", "error")
}
}
})
});
})
实例：
def user_list(request): all_user = models.User.objects.all() return render(request, "user_list.html", {"all_user": all_user}) def delete_user(request): if request.method == "POST": print(request.POST) res = {"code": 0} delete_id = request.POST.get("id") models.User.objects.filter(id=delete_id).delete() return JsonResponse(res)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>用户</title> <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <link rel="stylesheet" href="/static/sweetalert.css"> </head> <body> <div class="container"> <div class="row"> <div class="col-md-8 col-md-offset-2"> <table class="table table-bordered"> <thead> <tr> <th>#</th> <th>姓名</th> <th>操作</th> </tr> </thead> <tbody> {% for user in all_user %} <tr data_id="{{ user.id }}"> <td>{{ forloop.counter }}</td> <td>{{ user.username }}</td> <td> <button class="btn btn-warning">编辑</button> <button class="btn btn-danger">删除</button> </td> </tr> {% endfor %} </tbody> </table> </div> </div> </div> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script> <script src="/static/setupAjax.js"></script> <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.js"></script> <script src="/static/sweetalert.min.js"></script> <script> $(".btn-danger").on("click", function () { var _this = this; swal({ title: "你确定要删除吗？", text: "删除可就找不回来了哦！", type: "warning", showCancelButton: true, // 是否显示取消按钮 confirmButtonClass: "btn-danger", // 确认按钮的样式类是什么 confirmButtonText: "删除", // 确认按钮的文本内容是啥 cancelButtonText: "取消", // 取消按钮的文本内容 closeOnConfirm: false // 点击确认按钮是否关闭 }, function () { // 点击确认就执行的匿名函数 console.log(_this); var deleteId = $(_this).parent().parent().attr("data_id"); console.log(deleteId); console.log("要发送ajax请求拉...."); $.ajax({ url: "/delete_user/", type: "post", data: {"id": deleteId}, success: function (res) { console.log(res); if (res.code === 0) { swal("删除成功!", "你可以准备跑路了！", "success"); // 手动在页面上用js删掉那一行数据 } else { swal("删除失败", "你可以再尝试一下！", "error") } } }) }); }) </script> </body> </html>