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. 关于php查询mongodb限制返回字段的问题

    最近想做一个前端控制接口字段返回的一个基础方法,通过mongodb 的find($query,$field)查询来规定查询的字段,但是遇到这么一个问题: 工作代码中有两个封装方法 : /** * 查询 ...

  2. week07 13.1 NewsPipeline之 一 NewsMonitor

    我们要重构一下代码 因为我们之前写了utils 我们的NewsPipeline部分也要用到 所以我们把他们单独独立得拿出来 删掉原来的 将requirements.txt也拿出去 现在我们搬家完成 我 ...

  3. vs2015单步调试问题(附加进程)

    如果页面有Codebehind的页属,那么前端通过ajax提交到后端代码,无法在后端代码中取到值. 这是一个vs属性标记,用于跟踪管理项目.如果后端代码的自定义指定(Inherits)的话,应该取掉 ...

  4. OpenStack 安装:glance 安装

    接上一篇keystone, 这一篇介绍glance服务: 在开始操作之前,先用source环境变量,然后创建glance 用户,并设置密码为glance [root@linux-node1 ~]#op ...

  5. 大数据入门到精通12--spark dataframe 注册成hive 的临时表

    一.获得最初的数据并形成dataframe val ny= sc.textFile("data/new_york/")val header=ny.firstval filterNY ...

  6. SpringCloud Feign context-path踩到的坑

    最近在使用SpringCloud的context-path时,遇到了一些坑,记录一下. server.context-path(上下文) 服务提供者的application配置文件中有一个属性叫ser ...

  7. mysql修改删除You can't specify target table for update in FROM clause的问题

    表中出现重复数据,需要删除重复数据,只保留一条 DELETE FROM crm_participant WHERE id IN ( SELECT c.id cid FROM crm_participa ...

  8. 333. Largest BST Subtree节点数最多的bst子树

    ［抄题］: Given a binary tree, find the largest subtree which is a Binary Search Tree (BST), where large ...

  9. 使用setx 命令添加环境变量（Windows）

    背景 用GUI的方法可能添加环境变量可能会比较麻烦,为此可采用命令行操作的方式. 步骤 以管理员身份运行 cmd 输入 setx /M "%path%" "%path%[ ...

  10. canvas（四） Gradient- demo

    /** * Created by xianrongbin on 2017/3/9. */ /* strokeStyle 或 fillStyle 属性的值*/ /** * Demo1 创建线性渐变 */ ...