ajax怎么做删除操作,【笔记】AJAX+SweetAlert插件实现删除操作

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

Django AJAX SweetAlert

展示

SweetAlert 插件介绍

SweetAlert 是一个 JS 插件，能够完美替代 JS 自带的 alert 弹出框，并且功能强大，设计优美。

使用方式

引入：

基本使用

在 JS 代码中使用 swal 方法。常见方式：

高级用法

swal({

参数键值对

},function () {

执行的操作

})

常用参数：

title

text

showCancelButton

confirmButtonClass

confirmButtonText

cancelButtonText

closeOnConfirm

showLoaderOnConfirm

示例所用 HTML 代码

注意：

样式用的是 bootstrap 样式类

图标用的是 fontawesome

setupajax.js 是自己编写引入的，用于处理 csrf_token 问题，代码请见：

人员管理

.sweet-alert>h2 {

padding-top: 15px;

}

人员管理

序号ID姓名年龄操作

{% for p in persons %}

{{ forloop.counter }}{{ p.id }}{{ p.name }}{{ p.age }}

删除

{% endfor %}

// 绑定删除按钮

$(".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();

}

});

});

})

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()