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. 多个css样式合并到一个“目录”css文件中

    执行访问jsp后发现没有效果 同样的代码,在html中效果对比如下: 具体原因:不清楚,暂时记着~~~在jsp中不支持@import这种css样式的引用

  2. route命令详解

    1.   使用背景:需要接入两个网络,一个是部署环境所在内网环境,这个环境是上不了外网, 外网环境很可能是一个无线网络.如果两者都连接上,很可能导致有一方不能起作用,即外网或内网上不了,常常需要使用繁 ...

  3. 《DOM Scripting》学习笔记-——第二章 js语法

    <Dom Scripting>学习笔记 第二章 Javascript语法 本章内容: 1.语句. 2.变量和数组. 3.运算符. 4.条件语句和循环语句. 5.函数和对象. 语句(stat ...

  4. ajax----tomact服务器运行

    一.菜鸟教程的代码本地运行 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

  5. python虚拟环境的搭建

    使用python虚拟环境作用是项目与项目之间相互隔离,互相不受影响,比如当需要同时部署A.B两个项目时,A项目依赖C库的1.0版本,B项目依赖C库的2.0版本,假如不使用虚拟环境隔离A项目和B项目就很 ...

  6. sonar gitlab+jenkins配置

    sonar.projectKey=test-news-activitysonar.projectName=test-news-activitysonar.projectVersion=$BUILD_N ...

  7. vue的条件渲染和列表渲染介绍

    一.条件渲染 1.v-if语句 <div v-if="seen">hahahah</div> <!-- v-if插入或者删除元素的指令 --> ...

  8. ES6的let和const的不同点

    详细的异同点请点击:https://blog.csdn.net/zhouziyu2011/article/details/71366078

  9. cookie和session 以及Django中应用

    cookie和session 以及Django中应用   cookie和session机制 cookie和session机制 cookie机制采用的是在客户端保持状态的方案.作用就是为了解决HTTP协 ...

  10. Python开发——数据类型【运算符】

    算数运算符 比较运算符 赋值运算符 逻辑运算符 成员运算符