- 前后端数据传输的编码格式(contentType) - Ajax朝后端提交文件数据 - Ajax朝后端提交json数据 - Ajax结合layer弹窗实现删除的二次确认 - Django如何批量添加数据(一次性添加10000条数据,背后的逻辑重要) - 推导分页的原理(分页功能如何实现的,代码无需掌握,明白思路) - 以后分页就直接使用现成的分页器(类)

发布时间 2023-08-08 21:25:28作者: Py玩家

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

前后端数据传输的请求方式有两种:get、post

我们只研究post请求的编码格式

三种编码格式

urlencoded

form-data

json

发送post请求的方式

form表单

Ajax

postman(第三方工具,需要下载)

 

form表单发送post请求的时候数据的编码格式

请求头content-Type:参数

默认提交的编码格式:application/x-www-form-urlencoded

他的数据格式:username=dasdas&password=dasdas&gender=dasdas

Django后端如何接受的?

  Django后端针对符合urlencoded格式的数据,Django把数据都封装到了request.POST中了

 

multipart/form-data

编码格式从urlencoded改成form-data有什么效果?

  form表单就可以提交文件数据了

数据格式:

Content-Type:
multipart/form-data; boundary=----WebKitFormBoundary7iwnnLo3TDiHIAQz--->文件数据

Django后端如何接受的?

针对普通数据Django把数据封装到了request.POST中

针对文件数据Django把数据封装到了request.FILES中

 

Ajax提交post请求的数据时候,编码格式?

默认的提交格式是:application/x-www-form-urlencoded; a=1&b=2

Django后端针对符合urlencoded格式的数据,django把数据都封装到了request.POST

 

Ajax提交json格式的数据

提交json格式的数据必须满足两个条件:

1. 编码格式必须是json格式的:contentType参数

2. 数据必须是json {“a”:1}

 

Django后端如何处理json格式的数据?

针对Ajax提交的json格式的数据,Django后端不再把数据封装到request.POST中了

对于json格式的数据,django后端不在做任何的封装,数据是纯原生的,发送过来的数据是二进制形式的

我们自己来处理这些二进制数据

复制代码
# js中序列化
JSON.stringify({'a': 1, b: 2})  ----------》{'a': 1, b: 2} 对象
contentType:'application/json',
    

# django后端接收json格式的数据
json_str = request.body.decode('utf-8')
print(json_str)  # {"a":1,"b":2}

json_data = json.loads(json_str)
print(json_data)  # {'a': 1, 'b': 2}
print(json_data.get('a'))
复制代码

Ajax提交文件数据(重要)

复制代码
# 前端

<body>
<input type="text" id="username">
文件:<input type="file" id="myfile">
<button class="btn btn-primary">上传</button>
<script>
    $('.btn').click(function () {
        var username = $('#username').val()
        var myfile = $('#myfile')[0].files[0]
        //发送文件数据到后端需要借助于FormData对象
        var myFromDataObj = new FormData();
        myFromDataObj.append('username',username)
        myFromDataObj.append('myfile',myfile)

        $.ajax({
            url: '',
            type: 'post',
            data: myFromDataObj,
            contentType: false,  //告诉浏览器不要做任何的编码处理,Django自己来做处理
            processData: false,  //告诉浏览器不要对我处理的数据做任何处理
            success: function (res) {
                console.log(res)
            }
        })
    })

</script>
</body>

# 后端
def files(request):
    if request.method == 'POST':
        # print(request.POST)  # <QueryDict: {'username': ['瓦达']}>
        # print(request.FILES)  # <MultiValueDict: {'myfile': [<InMemoryUploadedFile: 弥豆子.jpg (image/jpeg)>]}>
        file_obj = request.FILES.get('myfile')
        print(file_obj,type(file_obj))
        print(file_obj.name, type(file_obj.name))
        with open(file_obj.name, 'wb') as z:
            for i in file_obj:
                z.write(i)
    return render(request, 'files.html')
复制代码

Ajax结合layer弹窗实现删除的二次确认

使用第三方的UI弹窗:layer、sweetalert

https://layuiweb.com/layer/index.htm-----------------layer弹窗模版网站

复制代码
<script>
        $('.del').click(function () {
            // 删除的逻辑,当我们点击删除按钮的时候,应该获取点击行的id,然后把这个id传到后端
            //做删除逻辑
            //找到点击行的id值
            var id = $(this).attr('delete_id');
            var _this = $(this)
            //发送Ajax请求,做一个二次确认
            layer.confirm('您确定要删除吗?', {
                btn: ['删了它', '点错了'] //按钮
            }, function () {
                $.ajax({
                    url: '/book_delete/',
                    type: 'post',
                    data: {id: id},
                    success: function (res) {
                        //第一种方式:使用location.reload()刷新
                        {#layer.msg(res.msg, {icon: 1}, function (){#}
                        {#    location.reload()})#}
                        layer.msg(res.msg, {icon: 1})
                        //第二种方式:定义.btn位置,再找父标签,删除tr字段
                        {#_this.parent().parent().remove()#}
                        //第三种方式:直接给tr字段赋予一个动态类属性,直接通过类属性找到标签删除
                        $('.tr_'+id).remove()
                    }
                })
            });

        })
    </script>
复制代码

批量插入数据