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("删除成功！")

所在项目

效果：

Django(序列化、SweetAlert插件)的更多相关文章

  1. python 全栈开发，Day75(Django与Ajax,文件上传,ajax发送json数据,基于Ajax的文件上传,SweetAlert插件)

    昨日内容回顾 基于对象的跨表查询 正向查询:关联属性在A表中,所以A对象找关联B表数据,正向查询 反向查询:关联属性在A表中,所以B对象找A对象,反向查询 一对多: 按字段:xx book ----- ...

  2. {Django基础七之Ajax} 一 Ajax简介 二 Ajax使用 三 Ajax请求设置csrf_token 四 关于json 五 补充一个SweetAlert插件(了解)

    Django基础七之Ajax 本节目录 一 Ajax简介 二 Ajax使用 三 Ajax请求设置csrf_token 四 关于json 五 补充一个SweetAlert插件(了解) 一 Ajax简介 ...

  3. Django与Ajax,文件上传,ajax发送json数据,基于Ajax的文件上传,SweetAlert插件

    一.Django与Ajax AJAX准备知识:JSON 什么是 JSON ? JSON 指的是 JavaScript 对象表示法(JavaScript Object Notation) JSON 是轻 ...

  4. {Django基础七之Ajax} 一 Ajax简介 二 Ajax使用 三 Ajax请求设置csrf_token 四 关于json 五 补充一个SweetAlert插件(了解)

    {Django基础七之Ajax} 一 Ajax简介 二 Ajax使用 三 Ajax请求设置csrf_token 四 关于json 五 补充一个SweetAlert插件(了解)   Django基础七之 ...

  5. django系列6--Ajax06 使用插件,Sweet-Alert插件

    使用SweetAlert插件 GitHub上的下载链接 下载完成后放入django项目静态目录下,在html文件中引入静态文件,下面是script部分 $(".btn-danger" ...

  6. Django框架10 /sweetalert插件、django事务和锁、中间件、django请求生命周期

    Django框架10 /sweetalert插件.django事务和锁.中间件.django请求生命周期 目录 Django框架10 /sweetalert插件.django事务和锁.中间件.djan ...

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

    [笔记]AJAX+SweetAlert插件实现删除操作 Django AJAX SweetAlert  展示 SweetAlert 插件介绍 SweetAlert 是一个 JS 插件,能够完美替代 J ...

  8. Django序列化&django REST framework

    第一章.Django序列化操作 1.django的view实现商品列表页(基于View类) # 通过json来序列化,但手写字典key代码量较大,容易出错:还有遇到时间,图片序列化会报错 from g ...

  9. Python 之 Django框架（ Cookie和Session、Django中间件、AJAX、Django序列化）

    12.4 Cookie和Session 12.41 cookie Cookie具体指的是一段小信息,它是服务器发送出来存储在浏览器上的一组组键值对,下次访问服务器时浏览器会自动携带这些键值对,以便服务 ...

随机推荐

  1. JavaScript学习-4——DOM对象、事件

    本章目录 --------window对象 --------document对象 --------事件 一.window对象 函数调用: 自己封装的函数只写:函数名(): 数学函数Math 例:绝对值 ...

  2. ---dd-wrt memo

    http://blog.csdn.net/fyh2003/article/details/44458657http://blog.csdn.net/u010189241/article/details ...

  3. mysql 使用注意

    1. consider upgrading MySQL client 描述:因mysql5版本过度到8版本后,访问要求升级mysql的客户端 原因:mysql在升级后,对加密算法部分做了调整导致. 对 ...

  4. 远程桌面 把explorer关掉了

    用Ctrl+Alt+End调出远程桌面的任务管理器.然后,运行explorer.exe即可重启该服务.

  5. [phvia/firman] PHP多进程服务器模型中的惊群

    [ 典型场景 ] 典型的多进程服务器模型是这样的,主进程绑定ip,监听port,fork几个子进程,子进程安装信号处理器,随后轮询资源描述符检查是否可读可写: 子进程的轮询又涉及到 IO复用,acce ...

  6. ubuntu 从零安装tf-serving环境和opencv

    参考官网:https://www.tensorflow.org/serving/setup 首先是安装gprc: pip install grpcio 然后发现没有安装pip,报错:sudo: pip ...

  7. JAVA数据库连接池C3p0 以及阿里Druid提供的连接池

    一:连接池的定义 本质上就是个容器(集合) 存放数据库连接的容器,当系统初始化后,容器被创建,容器中就会申请一些连接对象,当用户来访问数据库的时候,从容器中取连接对象,用户用完之后,归还. 二:常用的 ...

  8. cdnbest架设cdn同一个源用不同的端口访问如何设置

    在站点里的应用防火墙-->高级设置里配置 比如test.com要同时用80和88访问

  9. 解决win10电脑VB虚拟机无法安装64位系统的方法

    64位电脑在VB虚拟机里却只能安装32位系统怎么办? **原因:CPU虚拟化未开启 只要CPU虚拟化开启即可解决问题. 开启步骤: 1.打开电脑设置 2.进入 更新和安全 界面 3.进入 恢复 界面 ...

  10. [C++]字符串相关操作

    获取字符串长度 String str str.length(); //获取String类型字符串长度 str.size(); //STL获取容器中元素个数 Char* s strlen(s); //以 ...