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. 用ActiveX 创建自己的comboBox 控件(二)

    3.0 添加事件 3.1 添加OnSelChange 事件 当用户选中列表项的时候触发该事件.(不只是选择改变时触发,本次选择和上次相同时也触发): 添加完成后,在ActivexcomboBox.id ...

  2. Win10系统进行远程桌面连接出现身份验证错误怎么办

    在win10系统中,自带有远程桌面连接功能,但是有时候会遇到一些问题,比如有不少用户反映说在进行远程桌面连接的时候,出现身份验证错误的情况,导致远程连接失败,接下来给大家分享一下Win10系统进行远程 ...

  3. 计算macd与ma技术指标

    MACD部分 转载自云金杞:https://blog.csdn.net/qq_26948675/article/details/72636590 数据获取于聚宽平台 import pandas as ...

  4. 【Django】HTTP status code must be an integer.

    刚刚出现这个问题,还以为是表单提交或者什么网络错误 结果发现是自己的低级错误写了 HttpResponse(request,'sigin_result2.html',context)这个根本不能渲染模 ...

  5. netty(六) websocket开发应用

    package com.lance.net.server.common; import java.net.InetSocketAddress; import org.springframework.s ...

  6. 封装的mybatis连接类

    package com.kevin.utils;import org.apache.ibatis.io.Resources;import org.apache.ibatis.session.SqlSe ...

  7. Rancher 2.0 简单使用 重要部分截取

    学习地址 : https://rancher.com/docs/rancher/v2.x/en/quick-start-guide/ Install Rancher sudo docker run - ...

  8. WebApi上传文件

    上网搜了下Web Api上传文件的功能,发现都写的好麻烦,就自己写了一个,比较简单,直接上传文件就可以,可以用Postman测试. 简单的举例 /// <summary> /// 超级简单 ...

  9. gd_t , bd_t 结构分析

    在分析板级初始化函数board_init_f 和 board_init_r 之前,先来看一下在uboot中颇为重要的 gd_t, bd_t 结构 bd_t 所对应的定义bd_info 在 arch/a ...

  10. python程序编写简介

    语句和语法 # 注释 \ 转译回车,继续上一行,在一行语句较长的情况下可以使用其来切分成多行,因其可读性差所以不建议使用 : 将两个语句连接到一行,可读性差,不建议使用 : 将代码的头和体分开 语句( ...