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. 银河麒麟不同架构获取rpm包的方法

    银河麒麟不同架构获取rpm包的方法 背景 随着信创和网络安全越来越重要 现阶段国产化的软硬件部署越来越多. 很多时候现场有很多国产化的设备.不同架构.不同版本. 还不能上网, 无法获取对应的安装介质. ...

  2. [转帖]记一次vcsa6修复过程

    一. 某天发现一台vmware  vCenter Server Appliance services 6偶尔能登陆了,但极不稳定,连shell都偶尔能进...... 然后利用各种手段想方设法进到she ...

  3. postman中js脚本简单用法

    1.获取接口相应结果 var jsonData = pm.response.json() 2.设置环境变量 pm.environment.set("variable_key", & ...

  4. 【OpenAI】ChatGPT函数调用（Function Calling）实践

    6月13日OpenAI在Chat Completions API中添加了新的函数调用(Function Calling)能力,帮助开发者通过API方式实现类似于ChatGPT插件的数据交互能力. 本文 ...

  5. Orika JavaBean映射工具使用

    作者:京东零售 张宾 1.Orika是什么? Orika是一个简单.快速的JavaBean拷贝框架,它能够递归地将数据从一个JavaBean复制到另一个JavaBean,这在多层应用开发中是非常有用的 ...

  6. 01 vue子组件调用父组件中的方法

    vue子组件,调用父组件中有三种方法哈!下面我们一起来讲解. 第一种使用 直接在子组件中通过this.$parent.父组件中的方法.来调用父组件的方法 第一种的缺点是不能够传递参数哈.它只能够调用方 ...

  7. 没有安装vs通过Rider编译Dll

    没安装vs怎样生成dll? 比起VS那庞大的体积和编码效率,我还是更喜欢使用Rider(和VS的神级插件Resharper是同一家公司的产品),那么在没有安装VS的电脑上是否可以在命令行下把C#代码生 ...

  8. 小白学k8s(6)使用kubespray部署k8s

    kubespray部署k8s 准备 需要关闭防火墙 配置hosts 处理镜像 配置文件 运行 通过对应的镜像 运行代码 查看结果 出现的问题 墙 错误的配置 kubespray部署k8s 准备 kub ...

  9. go中bytes.Buffer使用小结

    buffer 前言 例子 了解下bytes.buffer 如何创建bytes.buffer bytes.buffer的数据写入 写入string 写入[]byte 写入byte 写入rune 从文件写 ...

  10. automapper 10 +autofac+asp.net web api

    automapper 不必多说 https://automapper.org autofac 这里也不多说 https://autofac.org 这里主要 说 automapper 10.0 版本+ ...