图书管理系统---基于ajax删除数据
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删除数据的更多相关文章
- Vue.js——基于$.ajax实现数据的跨域增删查改
概述 之前我们学习了Vue.js的一些基础知识,以及如何开发一个组件,然而那些示例的数据都是local的.在实际的应用中,几乎90%的数据是来源于服务端的,前端和服务端之间的数据交互一般是通过ajax ...
- 基于ajax提交数据
昨日回顾: 1 inclusion_tag -干什么用的?生成html的片段(动态,传参数,传数据) -app下新建一个模块,templatetags -创建一个py文件(mytag.py) -fro ...
- Vue.js——基于$.ajax实现数据的跨域增删查改
转自:https://www.cnblogs.com/keepfool/p/5648674.html 概述 之前我们学习了Vue.js的一些基础知识,以及如何开发一个组件,然而那些示例的数据都是loc ...
- 一般删除网页数据和jquery下使用Ajax删除数据的区别
1. 一般删除网页数据 就是指用户在点击删除的时候,会跳转到DeleteUser.ashx一般处理程序中,并且通过get传参的方式传递一个id的参数,然后在后台处理 <a href='Delet ...
- MVC使用jQuery.ajax()删除数据
jQuery.ajax()可以简写为$.ajax().以前有写过MVC删除的实现,如<MVC实现删除数据库记录> http://www.cnblogs.com/insus/p/336804 ...
- ajax删除数据（不跳转页面）
以前我们讲的删除是利用嵌入php代码,跳转到另一个页面,从而降低了删除速度,但我们今天讲的利用ajax不仅可以达到不跳页面快速删除,并且能添加特效来美化页面. AJAX = 异步 JavaScript ...
- 图书管理系统 基于form组件
models: from django.db import models # Create your models here. class Book(models.Model): name = mod ...
- AJAX 删除数据
var json = { "id":"12", "name":"admin"}$.ajax({ type: " ...
- ajax 删除数据无刷新
//html页面 <!doctype html><head> <title></title> <meta http-equiv="Con ...
- laravel5.4中ajax删除数据
1 JS代码 function deleteInfo(id) { if(id) { var r=confirm('确定要删除吗'); if(r==true) { $.ajax({ url: " ...
随机推荐
- [转帖]iptables ip_conntrack_max 调整
https://www.diewufeiyang.com/post/583.html 一.概念 ==================== -允许的最大跟踪连接条目:CONNTRACK_MAX(默认值是 ...
- [转帖]文件系统读写性能fio测试方法及参数详解
简介 Fio 是一个 I/O 工具,用来对硬件进行压力测试和验证,磁盘IO是检查磁盘性能的重要指标,可以按照负载情况分成照顺序读写,随机读写两大类. Fio支持13种不同的I/O引擎,包括:sync, ...
- [1036]Linux启动时间分析
简述 今天有同事咨询:项目上有台服务器操作系统启动时间较长,如何分析? 果然,好问题都来自实践. 经过查找,对于所有基于systemd的系统,可以使用systemd-analyze来分析系统启动时间. ...
- 万能shell 简单查看已存在日志所有的启动记录
程序将日志 自动打包成了 gz 文件, 今天突然想查查所有的日志有没有相关关键字. 第一步解压缩所有的日志 cd 到相关目录 for i in `ls` ; do gzip -d $i ; done ...
- kubeadm 搭建 k8s 时用到的常用命令汇总
简单记录一下 kubeadm config images list 修改镜像名称 docker tag registry.cn-hangzhou.aliyuncs.com/google_contain ...
- Opentelemetry Metrics API
Opentelemetry Metrics API 目录 Opentelemetry Metrics API 概览 在没有安装SDK情况下的API行为 Measurements Metric Inst ...
- 如何计算一个uint64类型的二进制值的尾部有多少个0
作者:张富春(ahfuzhang),转载时请注明作者和引用链接,谢谢! cnblogs博客 zhihu 公众号:一本正经的瞎扯 正文 这实在是一个很简单的问题,用代码可以表示如下: func Coun ...
- Go 循环之for循环，仅此一种
Go 循环之for循环,仅此一种 目录 Go 循环之for循环,仅此一种 一.for 循环介绍 二.for 循环结构 2.1 基本语法结构 2.2 省略初始值 2.3 省略初始语句和结束语句 2.4 ...
- 从零开始匹配vim(1)——选项设置
前面我们算是对 vimscript 做了一个入门,并且实现了一个 输出 hello world 的语句.现在我们继续进行 vimscript 的学习. set语句 之前在介绍 vim 基础的时候,我们 ...
- go中string是如何实现的呢
go中string是如何实现的呢 前言 实现 go语言中的string是不可变的 []byte转string string转[]byte 字符串的拼接 +方式进行拼接 fmt 拼接 Join 拼接 b ...