【一】前后端传输数据的编码格式(contentType)#

主要研究POST请求数据的编码格式

因为GET请求数据就是直接放在url后面的

可以朝后端发送post请求的方式
- form请求
- ajax请求

【1】form表单#

前后端传输数据的格式
- urlencoded
- formdata
- json

1
<form action="" method="post" enctype="text/plain"></form>
2
<form action="" method="post" enctype="application/x-www-form-urlencoded"></form>
3
<form action="" method="post" enctype="multipart/form-data"></form>

【2】编码格式#

form表单默认的编码格式是urlencoded
- 通过查看请求头中的 Content-Type 参数

1
text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.7
2
Accept-Encoding:gzip, deflate, br
3
Accept-Language:zh-CN,zh;q=0.9,en;q=0.8
4
Cache-Control:no-cache
5
Connection:keep-alive
6
Content-Length:27
7
Content-Type:application/x-www-form-urlencoded

携带数据格式

1
username=666666&password=66

Django后端针对 urlencoded 编码格式的数据会自动帮我们解析封装到 request.POST 中
如果编码格式改为 formdata ，那么针对普通的键值对还是解析到 request.POST 中，而其他文件格式的数据解析到 request.FILES 中
form表单无法发送json格式数据

【3】Ajax#

1
Accept:*/*
2
Accept-Encoding:gzip, deflate, br
3
Accept-Language:zh-CN,zh;q=0.9,en;q=0.8
4
Cache-Control:no-cache
5
Connection:keep-alive
6
Content-Length:31
7
Content-Type:application/x-www-form-urlencoded; charset=UTF-8

默认的编码格式是 urlencoded
数据格式

1
username=dream&password=1314521

Django后端针对 urlencoded 编码格式的数据会自动帮我们解析封装到 request.POST
--->username=dream&password=1314521

【4】代码演示#

（1）后端#

1
def index(request):
2
    if request.method == 'POST':
3
        print(request.POST)
4
        # <QueryDict: {'username': ['dream'], 'password': ['1314521']}>
5
        print(request.FILES)
6
        # <MultiValueDict: {'img_file': [<InMemoryUploadedFile: 作用域链.drawio.png (image/png)>]}>
7
    return render(request, 'index.html')

（2）前端#

1
<form action="" method="post" enctype="multipart/form-data">
2
    <p>username: <input type="text" name="username" class="form-control"></p>
3
    <p>password: <input type="password" name="password" class="form-control"></p>
4
    <p>file: <input type="file"></p>
5
    <p><input type="submit" class="btn btn-success"></p>
6
    <p><input type="button" class="btn btn-danger" value="按钮" id="d1"></p>
7
</form>
8

9
<script>
10
    $("#d1").click(function () {
11
        $.ajax({
12
            url: '',
13
            type: 'POST',
14
            data: {"username": "dream", "password": 1314521},
15
            success: function (args) {
16

17
            },
18
        })
19
    })
20
</script>

【二】Ajax发送JSON格式数据#

前后端传输数据的时候一定要保证编码格式数据与真正的数据格式是一致的

【1】引入#

（1）后端#

1
def ab_json(request):
2
    if request.method == 'POST':
3
        print(request.POST) #<QueryDict: {}>
4
    return render(request, 'ab_json.html')

（2）前端#

1
<button class="btn btn-danger" id="d1">点我</button>
2

3
<script>
4
    $('#d1').click(function () {
5
        $.ajax({
6
            url: '',
7
            type: 'post',
8
            // 前端数据转JSON格式数据 ：JSON.stringify
9
            data: JSON.stringify({"username": "dream", "password": 521521}),
10
            // 不指定参数，默认就是 urlencoded
11
            contentType: 'application/json',
12
            success: function (args) {
13

14
            }
15
        })
16
    })
17
</script>

请求标头携带的数据格式
- 已成功转换为JSON格式

1
{"username":"dream","password":521521}

【2】后端#

接收到的数据为空

1
def ab_json(request):
2
    if request.method == 'POST':
3
        print(request.POST) #<QueryDict: {}>
4
    return render(request, 'ab_json.html')

Django针对JSON格式的数据不会做任何处理
针对JSON格式的数据需要自己手动处理
解决办法

1
def ab_json(request):
2
    print(request.is_ajax())  # True
3
    if request.method == 'POST':
4
        print(request.POST)  # <QueryDict: {}>
5

6
    print(request.body)  # 返回的是二进制数据 ：b'{"username":"dream","password":521521}'
7
    # 针对JSON格式的数据需要自己手动处理
8
    json_bytes = request.body
9

10
    # （1）方式一：先解码 再转换数据格式
11
    json_str = json_bytes.decode('utf-8')
12
    json_dict = json.loads(json_str)
13
    print(json_dict, type(json_dict))  # {'username': 'dream', 'password': 521521} <class 'dict'>
14

15
    # （2）方式二：json.loads(二进制数据) 内部可以自动解码再反序列化
16
    json_dict_loads = json.loads(json_bytes)
17
    print(json_dict_loads, type(json_dict_loads))  # {'username': 'dream', 'password': 521521} <class 'dict'>
18

19

20
    return render(request, 'ab_json.html')

【3】总结#

（1）注意参数#

前端在通过Ajax请求发送数据的时候，一定要注参数修改

1
// 不指定参数，默认就是 urlencoded
2
contentType: 'application/json',

（2）符合JSON数据格式#

数据是真正的JSON格式数据

1
发送的数据一定要符合JSON格式
2
或经过JSON序列化再传输

（3）手动处理前端传入的JSON数据#

Django后端不会帮我们处理JSON格式数据，需要自己手动处理request.body中的数据

1
通过Ajax传过来的数据是二进制数据
2
在request.body中
3
要经过自己的反序列化才能拿到我们想要的数据

【三】Ajax发送文件数据#

【1】发送方法(formdata对象)#

Ajax发送文件数据需要借助js内置对象formdata

（1）前端#

1
<p>username: <input type="text" name="username" id="d1"></p>
2
<p>password: <input type="password" name="password" id="d2"></p>
3
<p>file: <input type="file" id="d3"></p>
4

5
<button id="btn" class="btn btn-danger">提交</button>
6

7

8
<script>
9
    // 点击按钮向后端发送普通键值对数据和文件数据
10
    $("#btn").on('click', function () {
11
        // （1）先生成一个内置对象
12
        let formDataObj = new FormData();
13

14
        // （2）支持添加普通的键值对
15
        formDataObj.append('username', $("#d1").val());
16
        formDataObj.append('password', $("#d2").val());
17

18
        // （3）支持添加文件对象 ---> 先拿到标签对象 ----> 再拿到文件对象
19
        formDataObj.append('myfile', $("#d3")[0].files[0]);
20

21
        // （4）基于Ajax，将文件对象发送给后端
22
        $.ajax({
23
            url: '',
24
            type: 'post',
25
            // 直接将对象放到data里面即可
26
            data: formDataObj,
27

28

29
            // Ajax发送文件必须添加的两个参数
30
            // 不需要使用任何编码 -  Django后端能自动识别 formdata 对象
31
            contentType: false,
32
            // 告诉浏览器不要对我的数据进行任何处理
33
            processData: false,
34

35
            success: function (args) {
36

37
            }
38
        })
39
    })
40
</script>

（2）后端#

1
def ab_file(request):
2
    if request.is_ajax():
3
        if request.method == 'POST':
4
            print('POST::>>', request.POST)
5
            # 普通键值对放在了  request.POST   中
6
            # POST::>> <QueryDict: {'username': ['dream'], 'password': ['666']}>
7
            print('FILES::>>', request.FILES)
8
            # 文件数据放在了  request.FILES   中
9
            # FILES::>> <MultiValueDict: {'myfile': [<InMemoryUploadedFile: img.png (image/png)>]}>
10

11
    return render(request, 'ab_file.html')

【2】发送文件数据的格式#

1
// 点击按钮向后端发送普通键值对数据和文件数据
2
$("#btn").on('click', function () {
3
    // （1）先生成一个内置对象
4
    let formDataObj = new FormData();
5

6
    // （2）支持添加普通的键值对
7
    formDataObj.append('username', $("#d1").val());
8
    formDataObj.append('password', $("#d2").val());
9

10
    // （3）支持添加文件对象 ---> 先拿到标签对象 ----> 再拿到文件对象
11
    formDataObj.append('myfile', $("#d3")[0].files[0]);
12

13
    // （4）基于Ajax，将文件对象发送给后端
14
    $.ajax({
15
    url: '',
16
    type: 'post',
17
    // 直接将对象放到data里面即可
18
    data: formDataObj,
19

20
    // Ajax发送文件必须添加的两个参数
21
    // 不需要使用任何编码 -  Django后端能自动识别 formdata 对象
22
    contentType: false,
23
    // 告诉浏览器不要对我的数据进行任何处理
24
    processData: false,
25

26
    success: function (args) {
27

28
    }
29
})

【3】小结#

（1）借助FormData对象#

Ajax发送文件数据需要利用内置对象FormData

1
// （1）先生成一个内置对象
2
let formDataObj = new FormData();
3

4
// （2）支持添加普通的键值对
5
formDataObj.append('username', $("#d1").val());
6
formDataObj.append('password', $("#d2").val());
7

8
// （3）支持添加文件对象 ---> 先拿到标签对象 ----> 再拿到文件对象
9
formDataObj.append('myfile', $("#d3")[0].files[0]);

（2）必须携带两个参数#

需要指定两个关键性的参数

1
// Ajax发送文件必须添加的两个参数
2
// 不需要使用任何编码 -  Django后端能自动识别 formdata 对象
3
contentType: false,
4
// 告诉浏览器不要对我的数据进行任何处理
5
processData: false,

（3）后端解析数据#

Django后端能直接自动识别到FormData对象
- 将内部的普通键值对自动解析并封装到request.POST中
- 将内部的文件数据自动解析并封装到request.FILES中

1
print('POST::>>', request.POST)
2
# 普通键值对放在了  request.POST   中
3
# POST::>> <QueryDict: {'username': ['dream'], 'password': ['666']}>
4

5
print('FILES::>>', request.FILES)
6
# 文件数据放在了  request.FILES   中
7
# FILES::>> <MultiValueDict: {'myfile': [<InMemoryUploadedFile: img.png (image/png)>]}>

【补充】request方法判断ajax#

1
request.is_ajax()

返回当前请求是否是ajax请求，返回布尔值

1
print(request.is_ajax())
2

3
# 正常浏览器网址回车提交的是 GET 请求 - 结果是False
4
# 当我们发送ajax请求后 - 结果是True

音乐

音乐

【一】前后端传输数据的编码格式(contentType)#

【1】form表单#

【2】编码格式#

【3】Ajax#

【4】代码演示#

（1）后端#

（2）前端#

【二】Ajax发送JSON格式数据#

【1】引入#

（1）后端#

（2）前端#

【2】后端#

【3】总结#

（1）注意参数#

（2）符合JSON数据格式#

（3）手动处理前端传入的JSON数据#

【三】Ajax发送文件数据#

【1】发送方法(formdata对象)#

（1）前端#

（2）后端#

【2】发送文件数据的格式#

【3】小结#

（1）借助FormData对象#

（2）必须携带两个参数#

（3）后端解析数据#

【补充】request方法判断ajax#

支持与分享

音乐

Ajax进阶操作

【一】前后端传输数据的编码格式(contentType)#

【1】form表单#

【2】编码格式#

【3】Ajax#

【4】代码演示#

（1）后端#

（2）前端#

【二】Ajax发送JSON格式数据#

【1】引入#

（1）后端#

（2）前端#

【2】后端#

【3】总结#

（1）注意参数#

（2）符合JSON数据格式#

（3）手动处理前端传入的JSON数据#

【三】Ajax发送文件数据#

【1】发送方法(formdata对象)#

（1）前端#

（2）后端#

【2】发送文件数据的格式#

【3】小结#

（1）借助FormData对象#

（2）必须携带两个参数#

（3）后端解析数据#

【补充】request方法判断ajax#

支持与分享