ajax结合sweetalert实现二次确认

二次确认效果: http://lipis.github.io/bootstrap-sweetalert/

    
数据展示
    

        

            
                    {% for user_obj in user_request %}
                        
                    {% endfor %}
                    
                

                

                    

                        
ID
                        
姓名
                        
年纪
                        
性别
                        
描述
                    
                

                

                            
{{ user_obj.pk }}
                            
{{ user_obj.username }}
                            
{{ user_obj.age }}
                            
{{ user_obj.get_gender_display }}
                            
{{ user_obj.gender }}
                            

                                编辑
                                
                                删除
                            
                        
            
        
    

好了，使我们需要取引入第三方模块，二次确认。

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
},
function(isConfirm) {
  if (isConfirm) {
    swal("Deleted!", "Your imaginary file has been deleted.", "success");
  } else {
    swal("Cancelled", "Your imaginary file is safe :)", "error");
  }
});

其中有些信息可以修改。

在确认删除会发现第三方模块的导入可能不兼容，可手动修改。

前端该有的都有了，现在开始操作。

    
    
    
    
    

    {% load static %}
    
    

    




    
数据展示
    

        

            
                    {% for user_obj in user_request %}
                        
                    {% endfor %}
                    
                

                

                    

                        
ID
                        
姓名
                        
年纪
                        
性别
                        
描述
                    
                

                

                            
{{ user_obj.pk }}
                            
{{ user_obj.username }}
                            
{{ user_obj.age }}
                            
{{ user_obj.get_gender_display }}
                            
{{ user_obj.gender }}
                            

                                编辑
                                
                                删除
                            
                        
            

        
    

后端逻辑代码：

def delete_user(request):
    """
    前后端在使用ajax进行交互的时候，后端通常给ajax回调函数返回一个字典格式的数据
    字典返回到前端就是一个自定义对象，前端可以通过.的方式拿到想要的数据
    :param request:
    :return:
    """
    if request.is_ajax():
        if request.method == 'POST':
            # code:1000 为响应状态码
            back_dic = {'code':1000,'msg':''}
            # 取到前端返回用户想要删除数据的主键值
            delete_id = request.POST.get('delete_id')
            models.User.objects.filter(pk=delete_id).delete()
            back_dic['msg'] = '数据已删除'
            # 需要告诉前端操作的结果
            return JsonResponse(back_dic)

ajax批量插入数据：bulk_create()

def pl(request):
    # 先将book插入10000条数据
    for i in range(10000):
        models.Book.objects.create(title='第%s本书' % i)
    # 再将所有的数据查询并返回给前端页面
    book_queryset = models.Book.objects.all()
    return render(request,'pl.html',locals())

class Book(models.Model):
    title = models.CharField(max_length=32)

{% for book_obj in book_queryset %}
    
{{ book_obj.title }}
{% endfor %}

此时前端可以接收到数据，但是加载时间至少需要五秒以上，太慢了。

使用bulk_create():

def pl(request):
    book_list = []
    for i in range(1000):
        book_obj = models.Book(title='第%s本书' % i)
        book_list.append(book_obj)
    models.Book.objects.bulk_create(book_list)
    return render(request,'pl.html',locals())

结论：耗时一秒左右，使用批量操作用 bulk_create()