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. 多进程模块 multiprocessing

    由于GIL的存在,python中的多线程其实并不是真正的多线程,如果想要充分地使用多核CPU的资源,在python中大部分情况需要使用多进程. multiprocessing包是Python中的多进程 ...

  2. Redis内存模型总结

    一.Redis内存统计 在客户端通过redis-cli连接服务器后,通过info命令可以查看内存使用情况: info memory 返回结果中比较重要的几个说明如下: (1)used_memory:R ...

  3. 最适合入门的Laravel中级教程(一)

    Laravel 是一个全栈框架: 我们使用 Laravel 开发业务常见有 3 个方向: 前端页面和后端逻辑混合的应用 主要是面向对 SEO 有需求的项目: 比如说新闻资讯博客文章等: 一般在控制器中 ...

  4. k8s之创建etcd集群

    主机规划 maste01——192.168.10.63 master02——192.168.10.64 node01——192.168.10.65 node02——192.168.10.66 1.为保 ...

  5. Codeforces Round #438 A. Bark to Unlock

    题意:给你一个原串和n个子串,问你这n个子串任意组合起来能不能使原串出现,串的长度为2. Examples Input ya4ahoytoha Output YES Input hp2http Out ...

  6. Codeforces Round #437 C. Ordering Pizza

    题意: n个人吃披萨,总共有两种披萨,每种披萨都是有S块,给出每个人要吃的块数,吃第一种披萨能获得的happy值,吃第二种披萨能获得的happy值,问你,在购买的披萨数最少的情况下能获得的最大的总的h ...

  7. UI动画优化技巧

    知乎上一篇比较好的文章,分享一下: tabs slide 内容过渡动画 好的动画会淡化页面直接的过度. 但更好的做法是使用连续的动画来来过度内容 当我们在设计交互式选项卡或弹出式菜单的时候,尝试将内容 ...

  8. Django model进阶

    Django-model进阶   QuerySet 可切片 使用Python 的切片语法来限制查询集记录的数目 .它等同于SQL 的LIMIT 和OFFSET 子句. >>> Ent ...

  9. linux svnserver的安装使用备用

    先说一下初弄者的误区,svn上传到svnserver的文件是变化了的,会被打包加入svn的版本库里边一般存在db 文件下 每次提交会生成0,1,2 这样排序的文件,在  /var/svn/apple/ ...

  10. 201621123002《Java程序设计》第六周学习总结

    1. 本周学习总结 1.1 面向对象学习暂告一段落,请使用思维导图,以封装.继承.多态为核心概念画一张思维导图或相关笔记,对面向对象思想进行一个总结. 注1:关键词与内容不求多,但概念之间的联系要清晰 ...