首页 > 其他分享 >【11.0】Ajax之基本语法

【11.0】Ajax之基本语法

时间：2023-07-17 11:46:59浏览次数：44  
标签：11.0 request json 语法 Ajax 格式 POST password 数据

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

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

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

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

【1】form表单

  • 前后端传输数据的格式

    • urlencoded

    • formdata

    • json

【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】代码演示

  • 后端
def index(request):
    if request.method == 'POST':
        print(request.POST)
        print(request.FILES)
    return render(request, 'index.html')
  • 前端HTML
<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】引入

  • 后端
def ab_json(request):
    if request.method == 'POST':
        print(request.POST) #<QueryDict: {}>
    return render(request, 'ab_json.html')
  • 前端
<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')

【补充】request方法判断ajax

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

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

【3】总结

  • 前端在通过Ajax请求发送数据的时候，一定要注参数修改
// 不指定参数，默认就是 urlencoded
contentType: 'application/json',
  • 数据是真正的JSON格式数据
发送的数据一定要符合JSON格式
或经过JSON序列化再传输
  • Django后端不会帮我们处理JSON格式数据，需要自己手动处理request.body中的数据
通过Ajax传过来的数据是二进制数据
在request.body中
要经过自己的反序列化才能拿到我们想要的数据

【三】Ajax发送文件数据

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

  • 前端

<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>
  • 后端
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')

【发送文件数据的格式】

// 点击按钮向后端发送普通键值对数据和文件数据
$("#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) {

}
})

【结论】

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

标签：11.0,request,json,语法,Ajax,格式,POST,password,数据
From： https://www.cnblogs.com/dream-ze/p/17559618.html

相关文章

  • 【10.0】Ajax之引入
    【一】Ajax简介【1】精髓精髓：异步提交/局部刷新动态获取用户名，实时跟后端确认并将结果展示给前端【2】发送请求的方式向后端发送请求的方式浏览器地址直接url回车GET请求a标签的href属性GET请求form表单GET请求/POST请求AjaxGET请求/POST请求......
  • 【技术积累】JavaScript中的基础语法【三】
    JavaScript的条件结构JavaScript中的条件结构主要包括if语句、if-else语句、if-elseif语句和switch语句。这些条件结构用于根据不同的条件执行不同的代码块。if语句if语句用于在满足条件时执行一段代码块。语法如下：if(condition){//codetobeexecutedifconditioni......
  • 【技术积累】JavaScript中的基础语法【二】
    JavaScript编写方式JavaScript是一种脚本语言，用于为网页添加交互性和动态功能。它可以直接嵌入到HTML中，并通过浏览器解释执行。下面是一些常见的JavaScript编写方式和相应的代码示例：内联方式在HTML文件中直接嵌入JavaScript代码，使用`<script>`标签将代码包裹起来。这种方式适用......
  • 【一】Ajax与异步编程之web服务端
    【一】Ajax与异步编程之web服务端Ajax属于客户端网络技术，属于js范畴。基于aiohttp模Ajax与异步编程之web服务端块构建一个提供http协议的web服务器，并准备数据给客户端请求使用。pipinstallaiohttppipinstallaiohttp_corsserver.pyfromaiohttpimportwebimporta......
  • 【三】Ajax与异步编程之数据传输格式ajax
    【三】Ajax与异步编程之数据传输格式ajax【1】什么是ajaxajax，一般中文称之为："阿贾克斯"，是英文“AsyncJavascriptAndXml”的简写译作：异步js和xml传输数据技术。ajax的作用：ajax可以让js代替浏览器向服务端程序发送http请求，与服务端进行数据通信，在用户不知道的情况下......
  • 【五】Ajax与异步编程之异步编程
    【五】Ajax与异步编程之异步编程【1】异步编程js默认是单线程运行的，这意味着两段代码不能同时运行，所以在同步代码执行过程中，代码是逐行地运行的。简单来理解就是：同步按你的代码顺序执行，异步不按照代码顺序执行，异步的执行效率更高。关于在javascript中异步编程的方式......
  • 【四】Ajax与异步编程之数据传输格式ajax同源策略和跨域方案
    【四】Ajax与异步编程之数据传输格式ajax同源策略和跨域方案【1】同源策略同源策略（ameoriginpolicy），是浏览器为了保护用户信息在服务端的安全的而设置一种安全机制。所谓的同源就是指代通信的两个地址（例如服务端接口地址与浏览器客户端页面地址）之间比较，是否协议、域名(IP)和......
  • SQL语法
    joinLEFTJOIN连接左表中的所有行，即使在右表中找不到匹配的行也显示出来，用NULL值代替。RIGHTJOIN和LEFTJOIN在功能上是等效的，只要表顺序被切换。INNERJOIN中ON条件等同于WHERE子句中的条件。groupbygroupby在where后面，groupby紧跟着having，groupby默认取第1条。like匹......
  • 【技术积累】JavaScript中的基础语法【一】
    Math对象JavaScript中的Math对象是一个内置的数学对象，表示对数字进行数学运算的方法和属性的集合。Math对象不是一个构造函数，所以不能使用new关键字来创建一个Math对象的实例。它包含了一些常见的数学运算函数和常量，可以直接通过Math对象来调用。以下是Math对象的一些常用方法：......
  • Markdown语法大全
    使用Markdown进行文档编辑Markdown是一种轻量级的标记语言，广泛用于编写文档和格式化文本。它具有简洁、易读、易写的特点，适用于各种场景，如写博客、编写文档、撰写README文件等。标题在Markdown中，你可以使用不同数量的#符号来创建标题。一个#表示一级标题，两个#表示二级标题，以此......

赞助商

阅读排行

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

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

Copyright © 2020-2023 IPS99 版权所有 IPS99