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

写在前面

在django中,针对前后端传输数据的编码格式,我们主要研究的是post请求;因为get请求传输的数据往往是直接放在url的后面的!如:
url?username=zhang&passsword=123

研究post请求传输数据的编码格式时,我们需要先了解,可以朝后端发送post请求的方式有哪些??

1.form表单中的method可以发送post请求
2.ajax中type可以指定post请求

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

1.urlencoded
2.formdata
3.json

针对能够发post请求的form表单和ajax,我们先来研究一下form表单。

1.form表单

form表单能够指定数据传输的编码格式只有两种,分别是默认urlencoded 和在form表单里指定enctype="multipart/form-data"的formdata格式,无法发送json格式数据

接下来,我们来详细看下form表单这两种编码格式的区别,先来创建一个html页面,页面包含一个form表单,里面有两个文本框,用户名和密码框和提交按钮!

<body>
<form action="">
    <p>用户名<input type="text" class="form-control"></p>
    <p>密码<input type="password" class="form-control"></p>
    <input type="submit" class="btn btn-danger " value="提交">
</form>
</body>

然后当我们点击提交的时候,打开浏览器的检查,此时,我们没有指定enctype的编码格式,所以发现其contentType的值为默认的urlencoded
image

所以form表单默认的前后端传输的数据格式为urlencoded,其原本的传输到后端的数据格式应为:username=jason&password=123

但是!!!
django针对contentType为urlencoded的编码格式,会自动帮你解析封装到request.POST中,所有我们才能在后端通过request.POST.get的方式进行获取前端传来的数据。

针对contenType为formdata的编码格式,前端传输过来的普通键值对还是会被封装到request.POST中,对于文件则解析封装到request.FILES中!

2.研究ajax

2.1 ajax默认发送urlencoded格式数据

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

但是!ajax还可以指定传输的数据格式为json格式,下面我来进行详细的研究。

2.2 ajax发送json格式数据

<script>
    $('#b1').click(function (){
        $.ajax({
            url:'',
            type:'post',
            data:JSON.stringify({'username':'zhang','age':22}), // 将需要向后端传输的数据改成json格式
            contentType:'application/json', // 指定前端向后端传输的数据编码格式
            success:function (){

            }
        })
    })
</script>

注意,这里有一点非常重要!就是一定要确保contentType和真正向后端传输过去的数据格式保持一致,即:date里面的参数要是json格式,contentType的值也要是'application/json'。

用ajax发送json数据给后端之后,后端接收的数据格式是{“username”:“zhang”,“age”:25}的样子,而request.POST只会对username=jason&age=20这样的格式数据进行封装,然后封装之后调用requeset的方法获取到前端传来的数据。

因此,我们就需要考虑用另一种方法来接收前端发来的json数据!针对json的数据,django需要您手动进行处理,它把json的数据存在了request.body里面,是以二进制的形式!所有我们需要将request.body里面的内容进行解码,然后在反序列化得到真正的数据格式。

    if request.is_ajax(): #注意这里需要引用一个request的新方法,作用是用来判断请求是否是ajax,返回值为true or false
        json_bytes = request.body  # 获取二进制json数据
        json_dict = json.loads(json_bytes)  #loads方法提供了解码和反序列化两步,因此我们就不需要在多写一步解码操作了
        print(json_dict)

2.3 ajax发送文件

ajax发送文件需要借助js的FormData对象,FormData对象不仅可以发送文件数据,也可用来向后端发送普通键值对。

HTML部分
<body>
<p><input type="text" id="d1"></p>
<p><input type="text" id="d2"></p>
<p><input type="file" id="d3"></p>
<button class="btn btn-primary" id="d4">点我</button>
</body>
<script>
    $('#d4').click(function (){
        let fornData = new FormData(); #创建一个FormData内置对象
        fornData.append('username',$('#d1').val()); #在FormData对象里添加普通的键值对
        fornData.append('password',$('#d2').val());
        fornData.append('file',$('#d3')[0].files[0]); #在FormData对象添加文件对象
        $.ajax({
            url:'',
            type:'post',
            data:fornData, //直接把对象放在data后面
            contentType:false,  //不需要指定如何编码格式,django会自动识别FormData对象
            processData:false, //告诉你的浏览器不要对传过去的数据进行处理,保持原样
            success:function (args){

            }
        })
    })
</script>
后端部分
    if request.is_ajax():
        if request.method == 'POST':
            print(request.POST)
            print(request.FILES)

总结:

1.需要利用内置对象FormData
// 2 添加普通的键值对
formDateObj.append('username',$('#d1').val());
formDateObj.append('password',$('#d2').val());
// 3 添加文件对象
formDateObj.append('myfile',$('#d3')[0].files[0])
2.需要指定两个关键性的参数
contentType:false, // 不需使用任何编码 django后端能够自动识别formdata对象
processData:false, // 告诉你的浏览器不要对你的数据进行任何处理
3.django后端能够直接识别到formdata对象并且能够将内部的普通键值自动解析并封装到request.POST中 文件数据自动解析并封装到request.FILES中

posted @ 2022-08-11 18:38  等日落  阅读(497)  评论(0编辑  收藏  举报