book_list.html代码
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="{% static 'plugins/bootstrap-3.3.7-dist/css/bootstrap.min.css' %}">
<link rel="stylesheet" href="{% static 'plugins/bootstrap-sweetalert-master/dist/sweetalert.css' %}">
</head>
<body>
<div class="container">
<h1>书籍展示</h1>
<div class="row">
<div class="col-md-9 col-md-offset-2">
<a href="/add_book/" class="btn btn-primary">添加书籍</a>
{# <a href="{% url 'add_book'%}" class="btn btn-primary">添加书籍</a>#}
{# <a href="{% url 'add_book' 2020 12%}" class="btn btn-primary">添加书籍</a>#}
<table style="margin-top: 10px;" class="table table-bordered table-striped table-hover">
<thead>
<tr>
<th>编号</th>
<th>书籍名称</th>
<th>价格</th>
<th>出版日期</th>
<th>出版社</th>
<th>作者</th>
<th>操作</th>
</tr>
</thead>
<tbody>
{% for book in books %}
<tr>
<td>{{ forloop.counter }}</td>
<td>{{ book.title }}</td>
<td>{{ book.price }}</td>
<td>{{ book.pub_date|date:'Y-m-d' }}</td>
<td>{{ book.pub.name }}</td>
<td>{% for j in book.authors.values %}
{{ j.name }}
{% endfor %}
</td>
<td>
<a href="{% url 'edit_book' book.id %}" class="btn btn-warning">编辑</a>
<a href="{% url 'delete_book' book.pk %}" class="btn btn-danger">删除</a>
<span style="display: none;">{{ book.pk }}</span> //隐藏了一个标签用于获取需要请求删除的id值
<a class="btn btn-success del">ajax删除</a>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
</div>
</body>
<script src="{% static 'js/jquery.js' %}"></script>
<script src="{% static 'plugins/bootstrap-3.3.7-dist/js/bootstrap.min.js' %}"></script>
<script src="{% static 'plugins/bootstrap-sweetalert-master/dist/sweetalert.min.js' %}"></script>
<script>
$('.del').on('click',function(){
var delete_id = $(this).prev().text();//找这个点击标签的上一个标签
var ths = $(this); //用于在下面函数中使用这个点击标签
swal({
title: "are you sure?",
text: "要谨慎！",
type: "warning",
showCancelButton: true,
confirmButtonClass: "btn-danger",
confirmButtonText: "确定删除",
cancelButtonText: "容我三思",
closeOnConfirm: false
},
//点击确认删除时触发的函数
function(){
$.ajax({
url:'/ajax_delete_book/'+ delete_id +'/',
//url:'/ajax_delete_book/'+ '100' +'/', //这个是用于演示错误响应error那个回调函数。
type:'get',
success:function (res) {
if (res==='ok'){
//关闭弹框
swal('删除成功!','你可以跑路了','success');
//局部刷新，删除对应记录
ths.parent().parent().remove();
}else{
console.log('出错啦');
},
error:function(res){
if (res.status===404){
swal('删除失败!',res.responseText,'error');
}
}
}
})
}
)
})
</script>
</html>
urlpatterns = [
url(r'^ajax_delete_book/(d+)/', views.ajax_delete_book, name='ajax_delete_book'),
]
def ajax_delete_book(request,pk):
try:
models.Book.objects.get(pk=pk).delete()
except:
return HttpResponse('找不到对应的资源~~',status=404)
return HttpResponse('ok')