Django学习记录之——ajax请求

发送ajax请求

Ajax
    - 异步提交 局部刷新
    - ajax最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容
    - 学习jQuery封装之后的版本， 所以一定要导入jQuery

    <script>
        //给按钮绑定点击事件
        $('#btn').click(function () {
            // 向后端发送ajax请求
            $.ajax({
                //指定后端，不指定默认当前后端
                url:'',
                //请求方式
                type:'post',
                //数据
                {#data:{'user':'aaa', 'password':'123'},#}
                data:{'i1':$('#i1').val(), 'i2':$('#i2').val()},
                //回调函数（异步回调机制）：当后端返回结果时会自动触发
                success:function (args) {
                    {#alert(args)#}
                    //渲染到第三个框里
                    $('#i3').val(args)
                }
            })
        })
    </script>

前后端数据传输格式

前后端传输数据的编码格式（contentType）
    可以朝后端发送post请求的方式
        - form表单
        - ajax请求
    前后端传输数据的编码格式
        - urlencoded(application/urlencoded)
        - form-data(multipart/form-data)
        - json(application/json)

    form表单：
        - 默认的数据编码格式是urlencoded
        - form表单不支持发送json格式的数据
    ajax:
        - 默认的方法也是urlencoded
    - django后端会针对符合urlencoded的数据格式会自动解析到request.POST中

ajax请求发送json格式的数据

ajax请求发送json格式的数据：
    指定发送数据格式的类型要和数据的实际类型相同！！！
    前端发送json格式数据：
        $("#btn").click(function () {
            $.ajax({
                url:'',
                type:'post',
                data:JSON.stringify({'username':'wcy', 'age':20}), //这里一定要转换成json格式数据
                contentType:'application/json', //指定json格式数据类型
                success:function () {

                }
            })
        })

    django后端解析json格式数据：
        - Django后端不会自动处理json格式的数据封装到request.POST中，而是默认在request.body中
        - 需要我们手动的处理json格式的数据
        - request.is_ajax()判断是否是ajax请求，返回布尔值
                if request.is_ajax():
                    print(request.body)
                    # json_obj = json.loads(request.body.decode('utf-8')) # 可以先解码再loads
                    json_dict = json.loads(request.body) # 也可以直接传入二进制数据，json会自动解码
                    print(json_dict, type(json_dict))
       - json.dumps()函数是将一个Python数据类型列表进行json格式的编码（可以这么理解，json.dumps()函数是将字典转化为字符串）
　　    - json.loads()函数是将json格式数据转换为字典（可以这么理解，json.loads()函数是将字符串转化为字典）

ajax发送文件

ajax发送文件：
    - ajax发送文件需要借助js内置对象FromData
    - 前端发送数据
        $('#btn').click(function () {
            //1 使用js的FromData对象
            let FormData_obj = new FormData();
            //2 添加普通键值对数据
            FormData_obj.append('username', $('#i1').val());
            FormData_obj.append('username', $('#i2').val());
            //3 添加文件对象
            FormData_obj.append('file', $('#i3')[0].files[0]);
            //4 发送ajax请求
            $.ajax({
                url:'',
                type:'post',
                data:FormData_obj, //直接放FormData对象即可传输所有的数据
                //ajax发送文件必须指定的两个参数
                contentType:false, //不使用任何编码，django会自动识别formdata对象
                processData: false, // 告诉浏览器不要对数据进行任何的处理
                success:function () {

                }
            })

        })

    - 后端解析
            if request.is_ajax():
                if request.method == "POST":
                    print(request.POST)
                    print(request.FILES)
            return render(request, 'ajax_file.html')
            - django能够自动识别数据类型将普通键值对解析到request.POST中，
                将文件解析到request.FILES中

django自带的序列化组件

django自带的序列化组件
    # 常规返回列表套字典
        user_obj = models.User.objects.all()
        # user_list = [
        #     {'pk': user.pk, 'name': user.name, 'sex': user.sex, 'age': user.age}
        #     for user in user_obj
        # ]
        # return JsonResponse(user_list, safe=False)

    # 使用django自带的序列化组件serializers
        from django.core import serializers
        res = serializers.serialize('json', user_obj)
        return HttpResponse(res)

ajax结合sweetalert实现确认框

ajax结合sweetalert实现确认框

    前端：
        // 可以自定义属性和属性值
        <button class="btn btn-danger btn-xs del-btn" del-id="{{ user_obj.pk }}">删除</button>

        <script>
            $('.del-btn').click(function () {
                {#alert($(this).attr('del-id'))#}
                let btn = $(this);
                //确认框
                swal({
                  title: "确认删除?",
                  text: "删除后信息不可恢复!",
                  type: "warning",
                  showCancelButton: true,
                  confirmButtonClass: "btn-danger",
                  confirmButtonText: "确认",
                  cancelButtonText: "取消",
                  closeOnConfirm: false,
                  closeOnCancel: false,
                  showLoaderOnConfirm: true  //等待操作
                },
                function(isConfirm) {
                  if (isConfirm) {
                     //向后端发送ajax请求
                     $.ajax({
                         url: '/deletedata/',
                         type: 'post',
                         data: {'del-id': btn.attr('del-id')},  //获取删除数据的主键
                         success:function (args) {
                             //args是后端返回的字典
                             if (args.code === 1000){
                                 swal("删除", args.msg, "success");
                                 //删除成功后刷新页面
                                    //方式一 直接刷新
                                    {#window.location.reload()#}
                                    //方式二 利用DOM操作，动态刷新 移除该行所在的元素tr
                                    btn.parent().parent().remove()

                             }else {
                                  swal("警告", "出现未知错误，删除失败", "error");
                             }
                         },
                     }) ;
                  } else {
                    swal("取消", "删除取消 :)", "error");
                  }
        });
            })
        </script>

    后端：
        import time
        if request.is_ajax():
            if request.method == 'POST':
                print(request.POST)
                back_dic = {'code': 1000, 'msg': ''}
                del_id = request.POST.get('del-id')
                models.User.objects.filter(pk=del_id).delete()
                time.sleep(3)
                back_dic['msg'] = '删除成功'
                return JsonResponse(back_dic)

批量插入数据

批量插入数据：
    # 普通批量插入 耗时很长
        # for i in range(1000):
        #     models.Book.objects.create(name='第%s个' % i)
        # book_queryset = models.Book.objects.all()

    # 使用django的批量插入 1万个也很快
    # 首先创建对象列表
        book_list = [
            models.Book(name='第{}个'.format(i)) for i in range(10000)
        ]
        models.Book.objects.bulk_create(book_list)
        book_queryset = models.Book.objects.all()