sweetalert,fontawesome,bootstrap的综合使用

最新推荐文章于 2022-03-16 16:55:10 发布

SpecYue

最新推荐文章于 2022-03-16 16:55:10 发布

阅读量266

点赞数

分类专栏：前端 Django ＣＳＳ json和ajax

本文链接：https://blog.csdn.net/qq_34788903/article/details/88196502

版权

Django 同时被 3 个专栏收录

31 篇文章 0 订阅

订阅专栏

json和ajax

6 篇文章 0 订阅

订阅专栏

前端

4 篇文章 0 订阅

订阅专栏

三个有名的前端框架,其实就是把很多css,js写好了,要用的时候直接去官网复制代码就好.

在这里做一个前后端交互的删除数据库信息的页面.

在这里插入图片描述
先导入.

面板个表格都是bootstrap框架的.弹出框是sweetalert框架的,ajax用到了JQuery.

<!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.min.css">
    <link rel="stylesheet" href="/static/sweetalert/sweetalert.css">
    <link rel="stylesheet" href="/static/setupajax.js">
    <style>
        .sweet-alert>h2{
            padding-top: 20px;
        }
    </style>
</head>
<body>
<div class="panel panel-default">
  <div class="panel-heading">Panel heading without title</div>
  <div class="panel-body">
    Panel content
  </div>
</div>

<div class="panel panel-default">
  <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>birtday</th>
      <th>操作</th>
  </tr>
  </thead>
        <tbody>
        {% for foo in persons %}
            <tr>
            <td>{{ forloop.counter }}</td>
            <td>{{ foo.id }}</td>
            <td>{{ foo.name }}</td>
            <td>{{ foo.age }}</td>
            <td>{{ foo.birthday }}</td>
            <td>
                <button class="btn btn-danger del"><i class="fa fa-trash-o">删除</i></button>
            </td>
            </tr>
        {% endfor %}
        
        </tbody>
</table>
  </div>
</div>

<script src="/static/bootstrap/js/bootstrap.min.js"></script>
<script src="/static/bootstrap/js/jquery-3.3.1.js"></script>
<script src="/static/sweetalert/sweetalert.min.js"></script>
<script>
    //找到删除按钮绑定删除事件
    $('.del').on("click",function () {
        var delId = $(this).parent().parent().children().eq(1).text();
        swal({
          title: "确定删除吗？",
          text: "你将无法恢复该虚拟文件！",
          type: "warning",
          showCancelButton: true,
          confirmButtonColor: "#DD6B55",
          confirmButtonText: "确定删除！",
          closeOnConfirm: false,
            cancelButtonText: "取消"
        },
        function(){
            //向后端发送删除的请求
            {#var delId = $(this).parent().parent().children().eq(1).text();#}
            $.ajax({
               url:"/delete/",
               type:'post',
               data:{"id":delId},
               success:function () {
                   swal("删除！", "你可以跑路了", "success");
               }
            });
        });
    })
</script>
</body>
</html>

ajax的url请求指向了url:"/delete/",,我们看视图

def delete(request):
    del_id = request.POST.get("id")
    models.Persons.objects.filter(id=del_id).delete()
    return HttpResponse("删除成功")

get到ajax拿到的id,用filter函数去删除即可.

SpecYue

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
sweetalert,fontawesome,bootstrap的综合使用

三个有名的前端框架,其实就是把很多css,js写好了,要用的时候直接去官网复制代码就好.在这里做一个前后端交互的删除数据库信息的页面.先导入.面板个表格都是bootstrap框架的.弹出框是sweetalert框架的,ajax用到了JQuery.&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta c...
复制链接

扫一扫