sweet+alert+ajax,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 %}

div.sweet-alert h2{

padding:10px

}

首先展示

序号用户名年龄性别操作

{% for userobj in user_queryset %}

{{forloop.counter}}#计数{{userobj.username}}{{userobj.age}}{{userobj.get_gender_display}}

固定用法获取gender，_display会自动加括号，所以此处display后面不能有括号

编辑

删除

{% endfor %}

给删除绑定一个点击事件

为删除添加一个绑定事件，利用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");

}

});

}

)