Django(序列化、SweetAlert插件)

day72

参考：https://www.cnblogs.com/liwenzhou/p/8718861.html#autoid-6-1-2

前端序列化

后端序列化

day73中

补充一个SweetAlert插件示例

甜甜的警告

点击下载Bootstrap-sweetalert项目

需要的文件：

其中有例子：https://lipis.github.io/bootstrap-sweetalert/

示例：

sweetalert

 <!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.css">
     <link rel="stylesheet" href="/static/sweetalert/sweetalert.css">
     <style>
         .sweet-alert>h2{
             padding-top: 15px;
         }
     </style>

 </head>
 <body>
 <div class="container">
     <div class="panel panel-primary">
         <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>生日</th>
                     <th>操作</th>
                 </tr>
                 </thead>
                 <tbody>
                 {% for p in persons %}
                     <tr>
                         <td>{{ forloop.counter }}</td>
                         <td>{{ p.id }}</td>
                         <td>{{ p.name }}</td>
                         <td>{{ p.age }}</td>
                         <td>{{ p.birthday|date:'Y-m-d' }}</td>
                         <td>
                             <button class="btn btn-danger del"><i class="fa fa-trash-o">删除</i></button>
                         </td>
                     </tr>
                 {% endfor %}
                 </tbody>
             </table>
         </div>
     </div>
 </div>

 <script src="/static/jquery-3.2.1.min.js"></script>
 <script src="/static/bootstrap/js/bootstrap.js"></script>
 <script src="/static/sweetalert/sweetalert.min.js"></script>

 <script src="/static/setupajax.js"></script>
 <script>
     // 找到删除按钮绑定事件  找del类
     {#$(".del").on("click", function () {#}
         {#github中示例内容#}
     {#    swal({#}
     {#            title: "Are you sure?",#}
     {#            text: "Your will not be able to recover this imaginary file!",#}
     {#            type: "warning",#}
     {#            showCancelButton: true,#}
     {#            confirmButtonClass: "btn-danger",#}
     {#            confirmButtonText: "Yes, delete it!",#}
     {#            closeOnConfirm: false#}
     {#        },#}
     {#        function () {#}
     {#            swal("Deleted!", "Your imaginary file has been deleted.", "success");#}
     {#        });#}

     $(".del").on("click", function () {
                            {#td       tr#}
        var $trEle = $(this).parent().parent();
     {#eq索引，取其中的内容#}
        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({
                url: "/delete/",
                type: "POST",
                data: {"id":delId},
                success:function (arg) {
                    swal(arg, "你可以跑路了！", "success");
                    $trEle.remove(); // 删去该条数据
                }
            });

        });
     })
 </script>

 </body>
 </html>

views.py

 from app01 import models
 def persons(request):
     ret = models.Person.objects.all()
     # person_list = []
     # for i in ret:
     #     person_list.append({"name": i.name,
     #     "age": i.age})
     # print(person_list, type(person_list))
     # import json
     # s = json.dumps(person_list)
     # print(s, type(s))  # 字符串

     # # 下面是内置的序列化
     # from django.core import serializers
     # s = serializers.serialize("json", ret)
     # print(s)
     # return HttpResponse(ret)
     print(ret)
     return render(request, "sweetalert.html", {"persons": ret})

 def delete(request):
     del_id = request.POST.get("id")
     models.Person.objects.filter(id=del_id).delete()
     print(del_id)
     return HttpResponse("删除成功！")

所在项目

效果：