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. [转帖]VCSA证书过期问题处理

    1.  故障现象 2022年10月25日,登陆VC报错. 按照报错信息,结合官方文档,判断为STS证书过期导致. vCenter Server Appliance (VCSA) 6.5.x, 6.7. ...

  2. [转帖]Linux小知识：sudo su和su的区别

    https://www.cnblogs.com/jiading/p/11717388.html su是申请切换root用户,需要申请root用户密码.有些Linux发行版,例如ubuntu,默认没有设 ...

  3. [专题]中立遭质疑，提价遭反对，ARM的生存难题怎么破？

    中立遭质疑,提价遭反对,ARM的生存难题怎么破? https://news.cnblogs.com/n/669715/ ARM税要提高.. RISC-V的机会? 文/黎文婕 来源:锌刻度(ID:znk ...

  4. Linux bridge使用dummy接口调用IPVS的问题

    Linux bridge使用dummy接口调用IPVS的问题 在IPVS: How Kubernetes Services Direct Traffic to Pods一文中,作者给出了一个简单的组网 ...

  5. 【JS 逆向百例】某空气质量监测平台无限 debugger 以及数据动态加密

    关注微信公众号:K哥爬虫,持续分享爬虫进阶.JS/安卓逆向等技术干货! 声明 本文章中所有内容仅供学习交流,抓包内容.敏感网址.数据接口均已做脱敏处理,严禁用于商业用途和非法用途,否则由此产生的一切后 ...

  6. git push卡住了 git push writing object

    解决方案: 执行命令:$ git config --global http.postBuffer 524288000 再次push 会卡在这里:POST git-receive-pack(892384 ...

  7. 抢占GPU的脚本

    前言 同样的,这篇博客也源自于我在做组内2030项目所产生的结果.当时,5个硕士生需要进行类似的微调工作,偶尔还会有博士生使用服务器上的GPU,但服务器上仅有8块GPU. 因此,如何快速抢占到 \(n ...

  8. FaceFusion：探索无限创意，创造独一无二的面孔融合艺术！

    FaceFusion:探索无限创意,创造独一无二的面孔融合艺术! 它使用先进的图像处理技术,允许用户将不同的面部特征融合在一起,创造有趣和令人印象深刻的效果.这个项目的潜在应用包括娱乐.虚拟化妆和艺术 ...

  9. 【三】多智能体强化学习（MARL）近年研究概览 ｛Analysis of emergent behaviors（行为分析)_、Learning communication（通信学习）｝

    相关文章: [一]最新多智能体强化学习方法[总结] [二]最新多智能体强化学习文章如何查阅{顶会:AAAI. ICML } [三]多智能体强化学习(MARL)近年研究概览 {Analysis of e ...

  10. 5.1 C/C++ 使用文件与指针

    C/C++语言是一种通用的编程语言,具有高效.灵活和可移植等特点.C语言主要用于系统编程,如操作系统.编译器.数据库等:C语言是C语言的扩展,增加了面向对象编程的特性,适用于大型软件系统.图形用户界面 ...