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. Linux 处理CPU和内存参数的方式总结

    Linux 处理CPU和内存参数的方式总结 关闭NUMA,关闭透明大页 比较简单的方法: vim /etc/default/grub 在 GRUB_CMDLINE_LINUX 里面添加配置: tran ...

  2. Oracle Linux7 与Oracle Linux8 下载rpm包的位置

    Oracle Linux 7 http://yum.oracle.com/repo/OracleLinux/OL7/latest/x86_64/index.html 索引页 http://yum.or ...

  3. 【JS 逆向百例】PEDATA 加密资讯以及 zlib.gunzipSync() 的应用

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

  4. C# Switch优雅写法

    1 private static bool CanBeUpdateOrDel(bool 是否提交, bool 是否撤回, string 审核状态) => (是否提交, 是否撤回, 审核状态) s ...

  5. 各大安卓模拟器的adb端口和使用对比

    在手游开发中,经常会使用模拟器来进行adb调试,本文列出了市面上主流模拟器的adb端口和使用对比. 模拟器ADB端口 市面上常见的模拟器连接ADB的端口列表: 网易MuMu模拟器 7555 夜神安卓模 ...

  6. python快速入门【五】---- 面向对象编程、python类

    python入门合集: python快速入门[一]-----基础语法 python快速入门[二]----常见的数据结构 python快速入门[三]-----For 循环.While 循环 python ...

  7. Visual Studio安装教程、Visual Studio2017软件提供，版本序列号丨编写第一个程序。

    一.安装步骤 1.安装前注意一下自己电脑的IE浏览器是不是10 版本及以上的,如果不是要先升级到10才能安装 Visual Studio2017.打开IE浏览器,点击[设置]接着点击[关于]即可查看. ...

  8. 验证码识别服务2Captcha框架

    2Captcha是一个自动验证码识别服务,主要用于解决各种互联网服务中的验证码问题.在许多网站注册账户或进行敏感操作时,为了验证用户是真实的而不是自动化程序,会出现验证码.用户必须正确输入验证码,才能 ...

  9. 4.2 Inline Hook 挂钩技术

    InlineHook 是一种计算机安全编程技术,其原理是在计算机程序执行期间进行拦截.修改.增强现有函数功能.它使用钩子函数(也可以称为回调函数)来截获程序执行的各种事件,并在事件发生前或后进行自定义 ...

  10. Python脚本之将一个文件夹划分多个文件夹和批量创建文件夹

    import os import shutil # 要移出的文件路径 path = r"C:\old_dir" # 新创建多个文件夹的路径 new_path = r"C: ...