django基础之day08，ajax结合sweetalert的使用

models.py文件

from django.db import models

class User(models.Model):
	username=models.CharField(max_length=32)
	age=models.IntegerField()
	gender_choices=(
		(1,'male'),
		(2,'female'),
		(3,'other')
	)
	gender=models.IntegerField(choices=gender_choices)

urls.py文件

urlpatterns=[
	url(r'^admin/', admin.site.urls),
    #首页
    url(r'^$',views.home)

]

settings.py文件

STATICFILES_DIRS=[
	os.path.join(BASE_DIR,'static')
]

#另外注释csrf中间件

views.py文件

from django.shortcuts import render
from app01 import models
import time
from django.http import JsonResponse

'''
如果是ajax进行前后端交互，
通常后端会返回给ajax一个字典

'''
def home(request):
	'''
	思路整理：
		前提：
			查询出User表中全部数据
			locals()提交全部数据到home.html页面
	前端页面请求到后端以后：
	1.先判断是不是ajax请求
	2.是ajax请求的，返回字典：{'code':1000,'msg':''}
	3.获取删除数据对应的id值
	4.设置页面睡眠3秒钟
	5.执行删除
	6.然后给back_dic字典中的msg做赋值操作，数据已经删除
	7.通过Jsonresponse把back_dic 字典返回给前端页面

	'''
	#代码如下：
	if request.is_ajax():
		back_dic={'code':1000,'msg':''}
		delete_id=request.POST.get('delete_id')
		time.sleep(3)
		models.User.objects.filter(pk=delete_id).delete()
		back_dic['msg']='数据已经被我删除掉了'
		return JsonResponse(back_dic)

	user_queryset=models.User.objects.all()
	查询出User表中的全部数据
	return render(request,'home.html',locals())
	返回所有数据到home.html页面上

homt.html文件

'''
首先动态配置静态文件
其次配置bootstrap文件和sweetalert文件的样式js和cs
'''
{% load static %}
<link rel='stylesheet' href='{% static 'boot3.7/css/boot.min.css' %}'>
<script src='{% static 'boot3.7/js/boot.min.js' %}'></script>

<link rel='stylesheet' href='{% static 'dist/sweetalert.css' %}'>
<script src='{% dist/sweetalert.min.js %}'></script>
<style>
	div.sweet-alert h2{
		padding:10px
	}
</style>

<div class='container-fluid'>
	<div class='row'>
		<div class='col-md-8 col-md-offset-2'>
			<h2>首先展示</h2>
			<br>
			<table class='table table-hover table-bordered table-striped'>
				<thead>
				<tr>
					<th>序号</th>
					<th>用户名</th>
					<th>年龄</th>
					<th>性别</th>
					<th class='text-center'>操作</th>
				</tr>
				</thead>
				<tbody>
				{% for userobj in user_queryset %}
					<tr>
						<td>{{forloop.counter}}</td>	#计数
						<td>{{userobj.username}}</td>
						<td>{{userobj.age}}</td>
						<td>{{userobj.get_gender_display}}</td>
						固定用法获取gender，_display会自动加括号，所以此处display后面不能有括号

						<td class='text-center'>
							<a href='#' class='btn btn-primary btn-sm'>编辑</a>
							<a href='#' class='btn btn-danger btn-sm cancel userId={{userobj.pk}}'>删除</a>
						</td>
					</tr>

				{% endfor %}

				</tbody>
			</table>
		</div>
	</div>
</div>

给删除绑定一个点击事件
<script>
	为删除添加一个绑定事件，利用cancel来指定删除事件
	$('.cancel').click(
		function(){
			朝后端发送ajax请求，如何拿到当前按钮所对应的数据的主键值id?
			先把$btn单独先存储起来，老师的思路是，添加自定义属性userId={{userobj.pk}}获取pk的值
			var $btn = $(this)
			swal({
                    title: "Are you sure?",
                    text: "You will not be able to recover this imaginary file!",
                    type: "warning",
                    showCancelButton: true,
                    confirmButtonClass: "btn-danger",
                    confirmButtonText: "Yes, delete it!",
                    cancelButtonText: "No, cancel plx!",
                    closeOnConfirm: false,
                    closeOnCancel: false,
                    showLoaderOnConfirm: true
                },
                function (isConfirm) {
                    if (isConfirm) {
                        //朝后端发送ajax请求
						$.ajax({
							url:'',
							type:'post',
							data:{'delete_id':$btn.attr('userId')}
							//$btn指代当前被点击删除的按钮，$btn.attr指代当前删除按钮对应的属性，删除数据所对应的pk值
							success:function(data){
								if (data.code==1000){
									swal('猪脑泡泡龙','删了','success')
									//通过DOM操作，来直接操作标签，删除对应的数据
									//当前标签点父级标签点父级标签点移除
									$btn.parent().parent().remove()
								}else{
									swal('有bug','未知错误'，'warning')
								}
							}

						})

                    } else {
                        swal("Cancelled", "Your imaginary file is safe :)", "error");
                    }
                });

		}

	)

</script>