book_list.html代码

{% load static %}

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <link rel="stylesheet" href="{% static 'plugins/bootstrap-3.3.7-dist/css/bootstrap.min.css' %}">

    <link rel="stylesheet" href="{% static 'plugins/bootstrap-sweetalert-master/dist/sweetalert.css' %}">

</head>

<body>

    <div class="container">

        <h1>书籍展示</h1>

        <div class="row">

            <div class="col-md-9 col-md-offset-2">

                <a href="/add_book/" class="btn btn-primary">添加书籍</a>

{#                <a href="{% url 'add_book'%}" class="btn btn-primary">添加书籍</a>#}

{#                <a href="{% url 'add_book' 2020 12%}" class="btn btn-primary">添加书籍</a>#}

                <table style="margin-top: 10px;" class="table table-bordered table-striped table-hover">

                    <thead>

                    <tr>

                        <th>编号</th>

                        <th>书籍名称</th>

                        <th>价格</th>

                        <th>出版日期</th>

                        <th>出版社</th>

                        <th>作者</th>

                        <th>操作</th>

                    </tr>

                    </thead>

                    <tbody>

                    {% for book in books %}

                    <tr>

                        <td>{{ forloop.counter }}</td>

                        <td>{{ book.title }}</td>

                        <td>{{ book.price }}</td>

                        <td>{{ book.pub_date|date:'Y-m-d' }}</td>

                        <td>{{ book.pub.name }}</td>

                        <td>{% for j in book.authors.values %}

                            {{ j.name }}

                        {% endfor %}

                        </td>

                        <td>

                            <a href="{% url 'edit_book' book.id %}" class="btn btn-warning">编辑</a>

                            <a href="{% url 'delete_book'  book.pk %}" class="btn btn-danger">删除</a>

                            <span style="display: none;">{{ book.pk }}</span>  //隐藏了一个标签用于获取需要请求删除的id值

                            <a class="btn btn-success del">ajax删除</a>

                        </td>

                    </tr>

                    {% endfor %}

                    </tbody>

                </table>

            </div>

        </div>

    </div>

</body>

<script src="{% static 'js/jquery.js' %}"></script>

<script src="{% static 'plugins/bootstrap-3.3.7-dist/js/bootstrap.min.js' %}"></script>

<script src="{% static 'plugins/bootstrap-sweetalert-master/dist/sweetalert.min.js' %}"></script>

<script>

    $('.del').on('click',function(){

        var delete_id = $(this).prev().text();//找这个点击标签的上一个标签

        var ths = $(this); //用于在下面函数中使用这个点击标签

        swal({

            title: "are you sure?",

            text: "要谨慎！",

            type: "warning",

            showCancelButton: true,

            confirmButtonClass: "btn-danger",

            confirmButtonText: "确定删除",

            cancelButtonText: "容我三思",

            closeOnConfirm: false

        },

        //点击确认删除时触发的函数

            function(){

                $.ajax({

                    url:'/ajax_delete_book/'+ delete_id +'/',

                    //url:'/ajax_delete_book/'+ '100' +'/', //这个是用于演示错误响应error那个回调函数。

                    type:'get',

                    success:function (res) {

                        if (res==='ok'){

                            //关闭弹框

                            swal('删除成功!','你可以跑路了','success');

                            //局部刷新，删除对应记录

                            ths.parent().parent().remove();

                        }else{

                              console.log('出错啦');

                         },

                    error:function(res){

                        if (res.status===404){

                              swal('删除失败!',res.responseText,'error');

                              }

                        }

                    }

                })

            }

        )

    })

</script>

</html>
  • urls.py文件
urlpatterns = [

    url(r'^ajax_delete_book/(\d+)/', views.ajax_delete_book, name='ajax_delete_book'),

]
  • views.py文件
def ajax_delete_book(request,pk):

    try:

        models.Book.objects.get(pk=pk).delete()

    except:

        return HttpResponse('找不到对应的资源~~',status=404)

    return HttpResponse('ok')

图书管理系统---基于ajax删除数据的更多相关文章

  1. Vue.js——基于$.ajax实现数据的跨域增删查改

    概述 之前我们学习了Vue.js的一些基础知识,以及如何开发一个组件,然而那些示例的数据都是local的.在实际的应用中,几乎90%的数据是来源于服务端的,前端和服务端之间的数据交互一般是通过ajax ...

  2. 基于ajax提交数据

    昨日回顾: 1 inclusion_tag -干什么用的?生成html的片段(动态,传参数,传数据) -app下新建一个模块,templatetags -创建一个py文件(mytag.py) -fro ...

  3. Vue.js——基于$.ajax实现数据的跨域增删查改

    转自:https://www.cnblogs.com/keepfool/p/5648674.html 概述 之前我们学习了Vue.js的一些基础知识,以及如何开发一个组件,然而那些示例的数据都是loc ...

  4. 一般删除网页数据和jquery下使用Ajax删除数据的区别

    1. 一般删除网页数据 就是指用户在点击删除的时候,会跳转到DeleteUser.ashx一般处理程序中,并且通过get传参的方式传递一个id的参数,然后在后台处理 <a href='Delet ...

  5. MVC使用jQuery.ajax()删除数据

    jQuery.ajax()可以简写为$.ajax().以前有写过MVC删除的实现,如<MVC实现删除数据库记录> http://www.cnblogs.com/insus/p/336804 ...

  6. ajax删除数据（不跳转页面）

    以前我们讲的删除是利用嵌入php代码,跳转到另一个页面,从而降低了删除速度,但我们今天讲的利用ajax不仅可以达到不跳页面快速删除,并且能添加特效来美化页面. AJAX = 异步 JavaScript ...

  7. 图书管理系统 基于form组件

    models: from django.db import models # Create your models here. class Book(models.Model): name = mod ...

  8. AJAX 删除数据

    var json = { "id":"12", "name":"admin"}$.ajax({ type: " ...

  9. ajax 删除数据无刷新

    //html页面 <!doctype html><head> <title></title> <meta http-equiv="Con ...

  10. laravel5.4中ajax删除数据

    1 JS代码 function deleteInfo(id) { if(id) { var r=confirm('确定要删除吗'); if(r==true) { $.ajax({ url: " ...

随机推荐

  1. [转帖]DISK BUSY的理解误区

    前几天有个客户的系统存在性能问题,从AWR报告上我们看到是CPU使用率过高,同时GLOBAL CACHE方面的争用比较严重.系统中的烂SQL很多,数据库中很多几十GB的大表也没有分区,总之问题很多.不 ...

  2. 【转帖】python 安装whl文件

    前言 WHL文件是以Wheel格式保存的Python安装包,Wheel是Python发行版的标准内置包格式.在本质上是一个压缩包,WHL文件中包含了Python安装的py文件和元数据,以及经过编译的p ...

  3. [转帖]oracle如何删除datafile,误删除Oracle datafile 无法打开数据库

    1.在Oracle open方式下,直接从OS上删除了datafile文件. rm /u02/rmants.dbf 2.数据库关闭后,无法打开数据库,只能到mount状态. SQL> alter ...

  4. 记录TritonServer部署多模型到多GPU踩坑 | 京东云技术团队

    一.问题是怎么发现的 部署chatglm2和llama2到一个4*V100的GPU机器上遇到问题 config.pbtxt 中设置模型分别在指定gpu上部署实例配置不生效 如以下配置为在gpu0上部署 ...

  5. Lectures

    Copy and Paste 3(P9523) Problem Solution 转移方程中的"父问题枚举子问题寻找转移"可以转成"子问题寻找父问题主动转移"处 ...

  6. vue全局事件总线和消息订阅详细讲解

    全局事件总线 在写组件的时候,我们都知道父传递子 也知道子传递给父 但是组件间嵌套复杂的时候我们应该怎么通信呢? 有的小伙伴会说适用vuex,的确是可以解决问题的 下面我们说一下全局事件总线 一种组件 ...

  7. js分钟转化为小时并且以某个数字进行递增

    有些时候,我们需要将分钟转为小时: 并且还有以一个数字进行递增: 呈现出[3,6,9,12,15,18]这样的递增形式 // 因为是递增,所以是相加: // 在使用+号的时候: // 注意两边都是数字 ...

  8. DotLiquid(.net模版引擎)

    可用生成C#代码,在KSFramework中有使用:https://github.com/mr-kelly/KSFramework 主页:http://dotliquidmarkup.org/ 文档: ...

  9. pywin32 实现寻找窗体并模拟按键

    import win32api import win32gui, win32con import win32clipboard import re import time class cWindow: ...

  10. Mygin中间件优化及logger日志中间件

    本篇是mygin的第七篇,参照gin框架,感兴趣的可以从 Mygin第一篇 开始看,Mygin从零开始完全手写,在实现的同时,带你一窥gin框架的核心原理实现. 目的 中间件Middleware优化 ...