首页 > 其他分享 >【15.0】Ajax进阶操作

【15.0】Ajax进阶操作

时间：2024-03-18 23:13:51浏览次数：26  
标签：15.0 进阶 request json Ajax 格式 POST password 数据

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

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

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

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

【1】form表单

  • 前后端传输数据的格式

    • urlencoded

    • formdata

    • json

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

【2】编码格式

  • form表单默认的编码格式是urlencoded
    • 通过查看请求头中的 Content-Type 参数
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
Accept-Encoding:gzip, deflate, br
Accept-Language:zh-CN,zh;q=0.9,en;q=0.8
Cache-Control:no-cache
Connection:keep-alive
Content-Length:27
Content-Type:application/x-www-form-urlencoded
  • 携带数据格式
username=666666&password=66

  • Django后端针对 urlencoded 编码格式的数据会自动帮我们解析封装到 request.POST 中

  • 如果编码格式改为 formdata ，那么针对普通的键值对还是解析到 request.POST 中，而其他文件格式的数据解析到 request.FILES 中

  • form表单无法发送json格式数据

【3】Ajax

Accept:*/*
Accept-Encoding:gzip, deflate, br
Accept-Language:zh-CN,zh;q=0.9,en;q=0.8
Cache-Control:no-cache
Connection:keep-alive
Content-Length:31
Content-Type:application/x-www-form-urlencoded; charset=UTF-8
  • 默认的编码格式是 urlencoded
  • 数据格式
username=dream&password=1314521
  • Django后端针对 urlencoded 编码格式的数据会自动帮我们解析封装到 request.POST
  • --->username=dream&password=1314521

【4】代码演示

（1）后端

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

（2）前端

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

<script>
    $("#d1").click(function () {
        $.ajax({
            url: '',
            type: 'POST',
            data: {"username": "dream", "password": 1314521},
            success: function (args) {

            },
        })
    })
</script>

【二】Ajax发送JSON格式数据

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

【1】引入

（1）后端

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

（2）前端

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

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

            }
        })
    })
</script>
  • 请求标头携带的数据格式
    • 已成功转换为JSON格式
{"username":"dream","password":521521}

【2】后端

  • 接收到的数据为空
def ab_json(request):
    if request.method == 'POST':
        print(request.POST) #<QueryDict: {}>
    return render(request, 'ab_json.html')

  • Django针对JSON格式的数据不会做任何处理

  • 针对JSON格式的数据需要自己手动处理

  • 解决办法

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

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

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

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


    return render(request, 'ab_json.html')

【3】总结

（1）注意参数

  • 前端在通过Ajax请求发送数据的时候，一定要注参数修改
// 不指定参数，默认就是 urlencoded
contentType: 'application/json',

（2）符合JSON数据格式

  • 数据是真正的JSON格式数据
发送的数据一定要符合JSON格式
或经过JSON序列化再传输

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

  • Django后端不会帮我们处理JSON格式数据，需要自己手动处理request.body中的数据
通过Ajax传过来的数据是二进制数据
在request.body中
要经过自己的反序列化才能拿到我们想要的数据

【三】Ajax发送文件数据

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

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

（1）前端

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

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


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

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

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

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

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

            success: function (args) {

            }
        })
    })
</script>

（2）后端

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

    return render(request, 'ab_file.html')

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

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

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

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

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

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

    success: function (args) {

    }
})

【3】小结

（1）借助FormData对象

  • Ajax发送文件数据需要利用内置对象FormData
// （1）先生成一个内置对象
let formDataObj = new FormData();

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

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

（2）必须携带两个参数

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

（3）后端解析数据

  • Django后端能直接自动识别到FormData对象
    • 将内部的普通键值对自动解析并封装到request.POST中
    • 将内部的文件数据自动解析并封装到request.FILES中
print('POST::>>', request.POST)
# 普通键值对放在了  request.POST   中
# POST::>> <QueryDict: {'username': ['dream'], 'password': ['666']}>

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

【补充】request方法判断ajax

request.is_ajax()
  • 返回当前请求是否是ajax请求，返回布尔值
print(request.is_ajax())

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

标签：15.0,进阶,request,json,Ajax,格式,POST,password,数据
From： https://www.cnblogs.com/dream-ze/p/18081724

相关文章

  • 程序人生——Java开发持续进阶，拥抱开源世界以思想为源泉
    目录引出开源世界建议139：大胆采用开源工具建议140：推荐使用Guava扩展工具包建议141：Apache扩展包建议142：推荐使用Joda日期时间扩展包建议143：可以选择多种Collections扩展思想为源建议144：提倡良好的代码风格建议145：不要完全依靠单元测试来发现问题建议146：让注释正确、清......
  • 从20w到50w测试进阶之路
    我应该怎么自己走向更好的生活。我的依靠是什么，什么可以作为我奋斗的目标，让我成功的从上海回到成都并且在成都拿到一个1w+以上的Offer，解决我的实际问题。我没有其他的方向，我把眼光放到了我的本职工作-测试上面。虽然经历了几年重心倾斜到我的生活上导致我的工作的毫无精进，但是我对......
  • 前端基础之HTML进阶
    表格标签只要是展示数据，一般都可以使用表格标签<body><tableborder="1"cellpadding="5"cellspacing="5>#border：为表格添加外边框#cellpadding：调整字体离边框距离#cellspacing：调整内边框离外边框的距离<thead>表头(字段信息)......
  • Go进阶之网络编程
    目录Go语言基础之网络编程一、互联网协议介绍二、互联网分层模型1.物理层2.数据链路层3.网络层4.传输层5.应用层三、socket编程1.socket图解四、Go语言实现TCP通信1.TCP协议2.TCP服务端3.TCP客户端4.TCP黏包（1）黏包示例（2）为什么会出现粘包（3）解决办法五、Go语言实现UDP通信1.......
  • protobuf进阶
    目录protobuf进阶一、protobuf基本类型和默认值1.1protobuf类型和语言对应关系1.2protobuf默认值3.案例（1）目录结构（2）hello.proto（3）生成go文件（4）client/main.go（5）server/main.go二、optiongo_package的作用三、服务端客户端同步问题3.1顺序导致的错误（1）目录结构（2）server/proto/hello......
  • gRPC进阶
    目录一、grpcmetadata机制1.1proto1.2生成go文件1.3服务端1.4客户端二、grpc拦截器interceptor2.1服务端拦截器grpc.UnaryInterceptor(interceptor)2.2客户端拦截器2.3开源拦截器三、通过metadata+拦截器实现认证3.1自定义（1）服务端（2）客户端（3）proto3.2WithPerRPCCredential......
  • CADEditorX 15.0.2 Patch Fix
    CADEditorX是一个ActiveX组件，用于在任何支持ActiveX和COM技术的开发环境（例如C#、VisualC++、Delphi、VB、JavaScript等）中向网页或正在开发的应用程序添加CAD功能。它可以查看、编辑、转换、打印和测量DWG、DXF、SVG、HPGL、STEP、IGES、STL等CAD文件。易于使用的......
  • C语言自定义类型：枚举（C语言进阶）
    目录前言1、枚举类型定义2、枚举的优点3、枚举的使用结语前言    本篇文章讲解C语言自定义类型：枚举类型。    枚举顾名思义就是一一列举，把可能的值一一列举。像一周的周一到周日可以枚举；每年12个月，可以枚举。1、枚举类型定义enumDay//星期{ Mo......
  • aardio教程二) 进阶语法
    表(table)aardio中除了基础数据类型外，其他的复合对象都是table(例如类和名字空间等)。table可以用来存放aardio的任何对象，包括另一个table。在其他语言中的字典、列表、数组、集合映射等，在aardio中都使用table来实现。创建字典importconsole;vartab={a=123;......
  • Ajax
    0x01Ajax（1）概述全称：AsynchronousJavascriptAndXML功能：用于客户端与服务端之间收发数据，即前后端交互，是一个默认异步执行机制的功能优势：不需要插件的支持不需要刷新页面获得数据的更新减轻服务器和带宽的负担缺陷：搜索引擎的支持度不够（2）基础在Javascript中有内......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99