图书管理系统---基于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: " ...
随机推荐
- Docker 运行 Redis Rabbitmq seata-server ftp 的简单办法
公司里面用到了很多组件, 发现安装二进制太麻烦了, 所以想用Docker 进行安装. 这里面简单给总结一下就不在折腾了.. 1. redis docker run -d -p 6379:6379 -- ...
- ESXi6.5 登录后出现错误 必须 退出的解决办法
- 使用Ant Design Vue的select搜索框出现的问题
Select 选择器进行搜索 <template> <div> <a-form-item label="分类:"> <a-select p ...
- elemntui-tab添加图标
<el-tabs :before-leave="moreState" v-model="activeName" @tab-click="hand ...
- jenkins上发布项目后将文件推送到另一台服务器build镜像
1.配置jenkins 1)主页面点击manage jenkins 2) 选择SystemConfiguration 3) 配置服务器信息,注意密码一定要输入对,还有端口有,一般是默认的22端口,但有 ...
- 紧跟潮流，抓住趋势，跟上全民AI的节奏，开源IM项目OpenIM产品介绍，为AIGC贡献力量
开源价值 高度自主.安全可控.开放自由,私有化部署,一切皆可控 透明度和可信度:开源软件的源代码是公开的,任何人都可以查看和检查代码,从而增强了软件的透明度和可信度.用户可以了解软件的内部结构和运作方 ...
- SQL 训练题目
title: SQL 训练题目 date: 2023-7-15 01:45:50 tags: - SQL 训练 一. 查询 "01" 课程比 "02" 课程成绩 ...
- MybatisPlus对Mysql数据库关键字作为列名的处理--SQLSyntaxErrorException: You have an error in your SQL syntax;
说明: 在设计数据库时,使用mysql关键字作为列名(比如order用于排序),就会报错:java.sql.SQLSyntaxErrorException: You have an error in ...
- 【6】VScode 无法在终端输入问题，提示：无法在只读编辑器中编辑
相关文章: [1]VScode中文界面方法-------超简单教程 [2]VScode搭建python和tensorflow环境 [3]VSCode 主题设置推荐,自定义配色方案,修改注释高亮颜色 [ ...
- Python 实现专属字典生成器
编写一个密码生成工具,这里我们使用弱密码与个性化数组组合形成一个定制字典,例如收集用户的姓名,昵称,QQ号手机号等资源,然后通过Python对搜集到的数据与弱密码进行结合,从而定制出属于某个人的专属密 ...