day72
参考：https://www.cnblogs.com/liwenzhou/p/8718861.html#autoid-6-1-2
前端序列化
后端序列化
day73中
补充一个SweetAlert插件示例
甜甜的警告
需要的文件：
其中有例子：https://lipis.github.io/bootstrap-sweetalert/
示例：
sweetalert
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>sweetalert_demo</title> 6 <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.css"> 7 <link rel="stylesheet" href="/static/fontAwesome/css/font-awesome.css"> 8 <link rel="stylesheet" href="/static/sweetalert/sweetalert.css"> 9 <style> 10 .sweet-alert>h2{ 11 padding-top: 15px; 12 } 13 </style> 14 15 </head> 16 <body> 17 <div class="container"> 18 <div class="panel panel-primary"> 19 <div class="panel-heading"> 20 <h3 class="panel-title">Person管理</h3> 21 </div> 22 <div class="panel-body"> 23 <table class="table table-bordered"> 24 <thead> 25 <tr> 26 <th>序号</th> 27 <th>id</th> 28 <th>name</th> 29 <th>age</th> 30 <th>生日</th> 31 <th>操作</th> 32 </tr> 33 </thead> 34 <tbody> 35 {% for p in persons %} 36 <tr> 37 <td>{{ forloop.counter }}</td> 38 <td>{{ p.id }}</td> 39 <td>{{ p.name }}</td> 40 <td>{{ p.age }}</td> 41 <td>{{ p.birthday|date:'Y-m-d' }}</td> 42 <td> 43 <button class="btn btn-danger del"><i class="fa fa-trash-o">删除</i></button> 44 </td> 45 </tr> 46 {% endfor %} 47 </tbody> 48 </table> 49 </div> 50 </div> 51 </div> 52 53 <script src="/static/jquery-3.2.1.min.js"></script> 54 <script src="/static/bootstrap/js/bootstrap.js"></script> 55 <script src="/static/sweetalert/sweetalert.min.js"></script> 56 57 <script src="/static/setupajax.js"></script> 58 <script> 59 // 找到删除按钮绑定事件 找del类 60 {#$(".del").on("click", function () {#} 61 {#github中示例内容#} 62 {# swal({#} 63 {# title: "Are you sure?",#} 64 {# text: "Your will not be able to recover this imaginary file!",#} 65 {# type: "warning",#} 66 {# showCancelButton: true,#} 67 {# confirmButtonClass: "btn-danger",#} 68 {# confirmButtonText: "Yes, delete it!",#} 69 {# closeOnConfirm: false#} 70 {# },#} 71 {# function () {#} 72 {# swal("Deleted!", "Your imaginary file has been deleted.", "success");#} 73 {# });#} 74 75 $(".del").on("click", function () { 76 {#td tr#} 77 var $trEle = $(this).parent().parent(); 78 {#eq索引，取其中的内容#} 79 var delId = $trEle.children().eq(1).text(); 80 81 swal({ 82 title: "你确定要删除吗？", 83 text: "一旦删除就找不回来了", 84 type: "warning", 85 showCancelButton: true, 86 confirmButtonClass: "btn-warning", 87 confirmButtonText: "确认", 88 cancelButtonText: "取消", 89 closeOnConfirm: false, 90 showLoaderOnConfirm: true // 显示删除的状态 91 }, 92 function(){ 93 // 向后端发送删除的请求 94 $.ajax({ 95 url: "/delete/", 96 type: "POST", 97 data: {"id":delId}, 98 success:function (arg) { 99 swal(arg, "你可以跑路了！", "success"); 100 $trEle.remove(); // 删去该条数据 101 } 102 }); 103 104 }); 105 }) 106 </script> 107 108 </body> 109 </html>
views.py
1 from app01 import models 2 def persons(request): 3 ret = models.Person.objects.all() 4 # person_list = [] 5 # for i in ret: 6 # person_list.append({"name": i.name, 7 # "age": i.age}) 8 # print(person_list, type(person_list)) 9 # import json 10 # s = json.dumps(person_list) 11 # print(s, type(s)) # 字符串 12 13 # # 下面是内置的序列化 14 # from django.core import serializers 15 # s = serializers.serialize("json", ret) 16 # print(s) 17 # return HttpResponse(ret) 18 print(ret) 19 return render(request, "sweetalert.html", {"persons": ret}) 20 21 def delete(request): 22 del_id = request.POST.get("id") 23 models.Person.objects.filter(id=del_id).delete() 24 print(del_id) 25 return HttpResponse("删除成功！")
所在项目
效果：
