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

Posted h1227

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了后端传输数据的编码格式(contentType)相关的知识,希望对你有一定的参考价值。

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

我们主要研究post请求数据的编码格式
get请求数据就是直接放在url后面的
url?username=jason&password=123

可以朝后端发送post请求的方式
    1.form表单
    2.ajax请求
前后端传输数据的编码格式
urlencoded
    
formdata

json

研究form表单

  默认的数据编码格式是urlencoded
  数据格式:username=jason&password=123
  django后端针对符合urlencoded编码格式的数据都会自动帮你解析封装到request.POST中
  username=jason&password=123    >>> request.POST
  
  如果你把编码格式改成formdata,那么针对普通的键值对还是解析到request.POST中而将文件解析到request.FILES中
  
  form表单是没有办法发送json格式数据的

研究ajax


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

ajax发送json格式数据

前后端传输数据的时候一定要确保编码格式跟数据真正的格式是一致的,不要骗人家!!!

{"username":"jason","age":25}  
    在request.POST里面肯定找不到
    
    django针对json格式的数据 不会做任何的处理 
    
request对象方法补充
    request.is_ajax()
        判断当前请求是否是ajax请求 返回布尔值

前端代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<button class="btn btn-danger" id="d1">点我</button>

<script>
$(‘#d1‘).click(function () {
$.ajax({
url: ‘‘,
type: ‘post‘,
contentType : ‘application/json‘,
data: JSON.stringify({‘username‘:‘egon‘,‘age‘:80}),
success:function (args) {

}
})
})
</script>
</body>
</html>

django后端views代码

def ab_json(request):
    import json
    if request.is_ajax():
        # print(request.body)  # b{"username":"egon","age":80}
        json_bytes = request.body
        json_str = json_bytes.decode(utf-8)
        json_dict = json.loads(json_str)
        # json.loads括号内如果传入了一个二进制格式的数据那么内部自动解码再反序列化
        # json_dict = json.loads(json_bytes)
        print(json_dict)  # {username: egon, age: 80}
    return render(request, ab_json.html, locals())

注意

ajax发送json格式数据需要注意点
    1.contentType参数指定成:application/json
    2.数据是真正的json格式数据
    3.django后端不会帮你处理json格式数据需要你自己去request.body获取并处理

ajax发送文件数据

ajax发送文件需要借助于js内置对象FormData
前端代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<p>username:<input type="text" id="d1"></p>
<p>password:<input type="text" id="d2"></p>
<p><input type="file" id="d3"></p>
<button class="btn btn-info" id="d4">点我</button>

<script>
// 点击按钮朝后端发送普通键值对和文件数据
$(‘#d4‘).click(function () {
//需要先利用FormData内置对象
let form_data_obj = new FormData();
//添加普通的键值对
form_data_obj.append(‘username‘,$(‘#d1‘).val());
form_data_obj.append(‘age‘,$(‘#d2‘).val());
//添加文件对象
form_data_obj.append(‘myfile‘,$(‘#d3‘)[0].files[0]);
//将对象基于ajax发送给后端
$.ajax({
url:‘‘,
type: ‘post‘,
data: form_data_obj,
// ajax发送文件必须要指定的两个参数
contentType: false, // 不需使用任何编码 django后端能够自动识别formdata对象
processData: false, // 告诉你的浏览器不要对你的数据进行任何处理
})
})
</script>
</body>
</html>

后端django views.py代码

def ab_file(request):
    if request.is_ajax():
        if request.method == POST:
            print(request.POST)
            print(request.FILES)
    return render(request,ab_file.html)

总结

总结:
    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中

 

以上是关于后端传输数据的编码格式(contentType)的主要内容,如果未能解决你的问题,请参考以下文章

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

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

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

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

ajax和form表单,django的中间件

Django之ajax的数据传输和分页器