Django中数据传输编码格式、ajax发送json数据、ajax发送文件、django序列化组件、ajax结合sweetalert做二次弹窗、批量增加数据

目录

• 前后端传输数据的编码格式(contentType)
  • 提交post请求的两种方式:
  • 前后端传输数据的编码格式
  • 研究form表单
    • 总结
  • 研究ajax
    • 总结
• ajax发送json格式数据
  • 注意事项
  • 前端ajax
  • 后端接收数据
• ajax发送文件
  • 前端ajax
  • 后端接收文件
• django自带的序列化组件
• ajax结合sweetalert做弹窗效果
  • 前端
  • 后端
  • 总结
• 批量插入

前后端传输数据的编码格式(contentType)

提交post请求的两种方式:

• form表单
• ajax请求

前后端传输数据的编码格式

• urlencoded
• formdata(form表单里的)
• jaon

研究form表单

默认的数据编码格式是urlencoded
数据格式:username=jason&password=123

当提交方式改为enctype="multipart/form-data"后

总结

urlencoded编码格式

django后端针对符合urlencoded编码格式的数据会自动帮你解析封装到request.POST中
eg: username=jason&password=123 >>> request.POST

formdata编码格式

针对普通的键值对还是解析到request.POST中,而将文件解析到request.FILES中

json

form表单不支持发送json数据

研究ajax

默认的编码格式是urlencoded
数据格式:username=jason&age=20

总结

django后端针对符合urlencoded编码格式的数据都会自动帮你解析封装到request.POST中
    username=jason&age=20   >>> request.POST

ajax发送json格式数据

注意事项

1.contentType参数指定成: application/json

2.数据必须是json数据，不是要用JSON.stringify转成json格式

3.django后端要用request.body获取并处理而不是用request.POST

4.reuqest.is_ajax()是判断当前请求是否是ajax请求，返回布尔值

前端ajax

<script>
    $('#d1').click(function (){
        $.ajax({
            url:'',  # 朝哪发数据
            type:'post',  # 指定请求方式
            contentType:'application/json',  # 指定编码格式
            data:JSON.stringify({'username': 'jason', 'pwd': 123}),  # 序列化成json格式
            success:function (args){

            }
        })
    })
</script>

后端接收数据

    if request.is_ajax():
        if request.method == 'POST':
            dic_json = request.body  # body接收的数据是二进制格式
            dic = json.loads(dic_json)  # json特点:自动解码并且反序列化(可以减少一步操作)
            print(dic)

ajax发送文件

条件： ajax发送文件需要借助于js内置对象FormData

前端ajax

<p>username:<input type="text" id="d1"></p>
<p>password:<input type="text" id="d2"></p>
<p>file: <input type="file" id="d3"></p>
<button class="btn btn-primary" id="d4">点我</button>

<script>
    $('#d4').on('click', function (){
        // 1.需要先利用FormData内置对象
        let formDataObj = new FormData()
        // 2.添加普通键值对
        formDataObj.append('username', $('#d1').val())
        formDataObj.append('password', $('#d2').val())
        // 3.添加文件对象
        formDataObj.append('myfile', $('#d3')[0].files[0])
        // 4.将对象基于ajax发送给后端
        $.ajax({
            url:'',
            type:'post',
            data:formDataObj, // 直接将对象放在data后面即可
            // 5.ajax发送文件必须要指定两个参数
            contentType:false,  // 告诉浏览器不要修改提交的数据格式
            processData:false,  // 告诉浏览器不要对提交的数据进行任何的更改
            success:function (args){
            }
        })
    })
</script>

后端接收文件

def file(request):
    if request.method == 'POST':
        print(request.POST)
        print(request.FILES)
        file_obj = request.FILES.get('myfile')
        print(file_obj.name)
    return render(request, 'file.html')

django自带的序列化组件

在前后分离的项目中，不能使用模板语法，只能用过json格式来实现数据的交互，一般数据的组成都是列表套字典

手动

def drf(request):
    from django.http import JsonResponse
    user_queryset_list = models.User.objects.all()
    # 不用组件手动的添加字典
    user_list = []
    for user_obj in user_queryset_list:
        temp = {
            'pk': user_obj.pk,
            'username': user_obj.username,
            'age': user_obj.age,
            'sex': user_obj.get_sex_display(),
        }
        user_list.append(temp)
    return JsonResponse(user_list, safe=False, json_dumps_params={'ensure_ascii': False})

组件序列化

def drf(request):
    from django.http import JsonResponse
    from django.core import serializers
    user_queryset_list = models.User.objects.all()
    # 序列化
    res = serializers.serialize('json', user_queryset_list) # 指定json格式 然后传入数据
    return JsonResponse(res, safe=False)
 """会自动帮你将数据变成json格式的字符串 并且内部非常的全面"""

前后端分离的项目
作为后端开发的你只需要写代码将数据处理好
能够序列化返回给前端即可
再写一个接口文档 告诉前端每个字段代表的意思即可

写接口就是利用序列化组件渲染数据然后写一个接口文档 该交代交代一下就完事

ajax结合sweetalert做弹窗效果

前端

"""
自己要学会如何拷贝
学会基于别人的基础之上做修改
研究各个参数表示的意思 然后找葫芦画瓢
"""
下面style是为了处理一些显示BUG
<style>
        div.sweetalert h2 {
            padding-top: 10px;
        }
</style>

<script>
    $('.del').on('click',function () {
        // 先将当前标签对象存储起来
        let currentBtn = $(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:'/delete/user/' + currentBtn.attr('delete_id'),  // 1 传递主键值方式1#}
                    url:'/delete/user/',  // 2 放在请求体里面
                    type:'post',
                    data:{'delete_id':currentBtn.attr('delete_id')},
                    success:function (args) {  // args = {'code':'','msg':''}
                        // 判断响应状态码 然后做不同的处理
                        if(args.code === 1000){
                            swal("删了!", args.msg, "success");
                            // 1.lowb版本 直接刷新当前页面
                            {#window.location.reload()#}
                            // 2.利用DOM操作 动态刷新
                            currentBtn.parent().parent().remove()
                        }else{
                            swal('完了','出现了位置的错误','info')
                        }
                    }

                })

          } else {
            swal("怂逼", "不要说我认识你", "error");
          }
        });
    })

</script>

后端

def delete(request):
    user_list = models.User.objects.filter(is_delete=0)
    if request.is_ajax():
        if request.method == 'POST':
            del_id = request.POST.get('id')
            models.User.objects.filter(pk=del_id).update(is_delete=1)
            back_dic = {'status': 200, 'msg': '删除成功'}
            return JsonResponse(back_dic)
    return render(request, 'delete.html', locals())

这是显示的BUG，按最上面的style改一下就好

最终版

总结

1.以后要获取标签内的属性可以通过自定义的方式，不要局限于标签固有的属性
用jqery对象.attr(属性名)  就可以获得到对应的属性值
如果是获取input框用户输入的数据 就用jqery对象.val()
2.还有一个设置点击事件的方法就是在标签内部定义
eg:  <button onclick="del(可以传参)">删除</button>
    然后在<script>     function del(参数){...}  </script>
3.标签的id是不可重复的,可以用拼接的方式使id不重复
eg:  <a  onclick="del({{ user_obj.id }})" id="btn_{{ user_obj.id }}">删除</a>
获取标签对象可以用拼接来获取
<script>
function del(id){
    $('#btn_' + id )  // 这样也是可以的  等价于  $('#btn_1') 、$('#btn_2')...
}
</script>

批量插入

格式: bulk_create

普通插入数据

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

# 很慢  响应时间大概10s左右  还只是10000条数据

批量插入

批量插入
     book_list = []
     for i in range(100000):
         book_obj = models.Book(title='第%s本书' % i)
         book_list.append(book_obj)
     models.Book.objects.bulk_create(book_list)  # 批量插入数据 使用列表套对象
    return render(request,'ab_pl.html',locals())

# 用时3s 而且数据还是100000条