三个有名的前端框架,其实就是把很多css,js写好了,要用的时候直接去官网复制代码就好.
在这里做一个前后端交互的删除数据库信息的页面.
先导入.
面板个表格都是bootstrap框架的.弹出框是sweetalert框架的,ajax用到了JQuery.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>sweetalert_demo</title>
<link rel="stylesheet" href="/static/bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="/static/fontawesome/css/font-awesome.min.css">
<link rel="stylesheet" href="/static/sweetalert/sweetalert.css">
<link rel="stylesheet" href="/static/setupajax.js">
<style>
.sweet-alert>h2{
padding-top: 20px;
}
</style>
</head>
<body>
<div class="panel panel-default">
<div class="panel-heading">Panel heading without title</div>
<div class="panel-body">
Panel content
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">person管理</h3>
</div>
<div class="panel-body">
<table class="table table-bordered">
<thead>
<tr>
<th>序号</th>
<th>id</th>
<th>name</th>
<th>age</th>
<th>birtday</th>
<th>操作</th>
</tr>
</thead>
<tbody>
{% for foo in persons %}
<tr>
<td>{{ forloop.counter }}</td>
<td>{{ foo.id }}</td>
<td>{{ foo.name }}</td>
<td>{{ foo.age }}</td>
<td>{{ foo.birthday }}</td>
<td>
<button class="btn btn-danger del"><i class="fa fa-trash-o">删除</i></button>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
<script src="/static/bootstrap/js/bootstrap.min.js"></script>
<script src="/static/bootstrap/js/jquery-3.3.1.js"></script>
<script src="/static/sweetalert/sweetalert.min.js"></script>
<script>
//找到删除按钮绑定删除事件
$('.del').on("click",function () {
var delId = $(this).parent().parent().children().eq(1).text();
swal({
title: "确定删除吗?",
text: "你将无法恢复该虚拟文件!",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "确定删除!",
closeOnConfirm: false,
cancelButtonText: "取消"
},
function(){
//向后端发送删除的请求
{#var delId = $(this).parent().parent().children().eq(1).text();#}
$.ajax({
url:"/delete/",
type:'post',
data:{"id":delId},
success:function () {
swal("删除!", "你可以跑路了", "success");
}
});
});
})
</script>
</body>
</html>
ajax的url请求指向了url:"/delete/",
,我们看视图
def delete(request):
del_id = request.POST.get("id")
models.Persons.objects.filter(id=del_id).delete()
return HttpResponse("删除成功")
get到ajax拿到的id,用filter函数去删除即可.