Ajax进阶操作

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

  • 可以朝后端发POST请求的有form表单的POST请求和Ajax的POST请求

【1】form表单#

  • application/x-www-form-urlencoded：默认编码类型，适用于大多数表单数据，将数据编码为名称/值对的形式，键值对之间用 & 分隔，适用于文本字段和一般表单数据。
  • multipart/form-data：适用于文件上传表单，数据以多部分的形式进行编码，并且每个部分都有独立的头信息，可以处理文件和普通文本数据。
  • text/plain：以纯文本形式提交表单数据，不进行任何编码，适用于一些特殊情况，如需要发送纯文本数据或需要与其他非 HTML 或 Web 服务器交互的情况。
# 1.默认的编码格式是urlencoded
数据格式:username=green&password=123
django后端针对符合urlencoded编码格式的数据都会自动解析封装到request.POST中
如果编码格式改成formdata，
针对普通的键值对还是解析到request.POST中，
针对文件格式会解析封装到request.FILES中
form表单没办法发送json格式的数据

【2】ajax请求#

  • ajax的post请求数据格式也是像urlencoded一样，所以也能被request.POST请求接收到

【二】Ajax发送json格式数据

  • 前后端传输数据的时候一定要确保编码格式与数据正真的格式是一致的
# 前端页面
<body>
<button class="btn btn-danger" id="d1">点我</button>
<script>
    $('#d1').on('click', function () {
        $.ajax({
            url: '',
            type: 'post',
            contentType: 'application/json',
            data: JSON.stringify({'username': 'green', 'age': 18}),
            {#data: {'username': 'green', 'age': 18},#}
            success: function () {

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

# 在浏览器中可以看到 数据格式是这样的
{username: "green", age: 18}

# 所以在后端里，request.POST是一定接收不到对应的数据的
        
# vivews.py
def ab_json(request):
    print(request.POST) # <QueryDict: {}>
    return render(request, 'json.html')

# 因为在之前推理过，只有符合 username=green&password=123 也就是urlencoded数据格式的数据reques.POST才会将其解析并且封装
        
# 可以理解为，django认为json类型的数据 过于重要，需要我们自己去进行封装

【1】is_ajax方法#

  • 这是一个request对象的方法，用于判断当前请求是否是一个Ajax请求，返回值是一个布尔值
def ab_json(request):
    print(request.is_ajax()) # True 或者 False
    return render(request, 'json.html')

【2】处理json格式的数据#

  • 针对json格式的数据需要我们自己手动处理
  • 通过request.body这个方法可以拿到原生的json数据格式
import json


def ab_json(request):
    print(request.is_ajax())
    print(request.body)  # b'{"username":"green","age":18}'
    json_bytes = request.body
    json_str = json_bytes.decode('utf-8')  # 解码
    dic = json.loads(json_bytes)  # 反序列化
    print(dic, type(dic)) # {'username': 'green', 'age': 18} <class 'dict'>
    return render(request, 'json.html')

# 小知识
其实json.loads括号内如果传入了一个二进制格式的数据，那么它内部会自动将其解码再进行反序列化

【3】总结#

  • 在处理Ajax请求的时候，其内部的contentType参数要指定成application/json
  • 在ajax内部的数据格式要和contentType的数据格式相对应
  • django不会去处理json类型的数据，需要我们自己手动处理，原生json数据封装在request.body里面

【三】Ajax发送文件

  • Ajax发送文件需要借助js的formdata对象
  • 在ajax请求内不需要配置两个关键性的参数contentType:false,processData:false
  • django后端能够自动识别formdata对象，并且能将键值对数据和文件数据分别自动封装到POST和FILES中
<body>
<p>username:<input type="text" class="form-control" id="d1"></p>
<p>password<input type="text" class="form-control" id="d2"></p>
<p>password<input type="file" class="form-control" id="d4"></p>
<p><input type="submit" class="btn btn-danger" id="d3"></p>
<script>
    $('#d3').on('click', function () {
        // 1.需要先领用FormData对象创建一个对象
        let formDateObj = new FormData()
        // 2.添加键值对 这里的'username password' 相当于标签的name属性
        formDateObj.append('username', $('#d1').val())
        formDateObj.append('password', $('#d2').val())
        // 3.添加文件对象
        formDateObj.append('myfile', $('#d4')[0].files[0])
        // 4.将对象发送到后端
        $.ajax({
            url:'',
            type:'post',
            data:formDateObj, // 直接将对象传入
            contentType:false, // 指定不需要任何数据编码，django的后端能够自动识别formdata对象
            processData:false, // 告诉浏览器不要对数据进行任何的处理
            success:function (args){

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



def ab_files(request):
    if request.is_ajax():
        print(request.POST)
        print(request.FILES)
    return render(request, 'files.html')

作者：Esofar

出处：https://www.cnblogs.com/Hqqqq/p/18094906

版权：本作品采用「署名-非商业性使用-相同方式共享 4.0 国际」许可协议进行许可。

posted @   HuangQiaoqi  阅读(6)  评论(0)  编辑  收藏  举报
相关博文：
· Ajax基础操作
· 请求与响应
· 【15.0】Ajax进阶操作
· Django框架之Ajax进阶
· 【11.0】Ajax之基本语法
阅读排行：
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· Docker 太简单，K8s 太复杂？w7panel 让容器管理更轻松！
more_horiz
keyboard_arrow_up dark_mode palette
选择主题
menu
点击右上角即可分享
微信分享提示