Ajax 发送json格式数据以及发送文件(FormData)和自带的序列化组件: serializers
前后端传输数据的编码格式(contentType)
get请求数据就是直接放在url?后面的
url?usernmae=junjie&password=123...
可以向后端发送post请求的方式
- form请求
- ajax请求
前后端传输数据的编码格式
- urlencoded
- formdata
- json
研究form表单:默认的数据编码格式是(urlencoded)
结论:Django针对urlencoded编码格式的数据会自动帮你解析封装到request.POST中。
那么文件是什么数据类型?
结论:如果将编码格式改为form-data,那么针对普通的键值对还是解析到request.POST,但是针对文件类型格式解析到request.FILES中。
Django进行了二次封装,后端针对不同的编码格式在后端内部做不同的编码解析,并放到不同的方法中。
form表单只能发送urlencoded以及formdata两种编码格式。
那么Ajax是什么数据格式?
结论:默认也是urlencoded,数据格式username=junjie&age=20。所有后端需要request.POST接受数据
ajax发送JSON格式数据
前后端传输数据的时候一定要确保编码格式与数据真正的格式是一致的。
JSON.stringify 前端将数据转为JSON格式 与 contentType:'application/json' 指定字符编码格式
<script>$('#d1').click(function(){ // button按钮触发点击事件$.ajax({url:'',type:'post',data:JSON.stringify({'username':'junjie','age':18}),//数据也需要转为JSON格式。contentType:'application/json',//指定字符编码格式success:function (){}})})
</script>
在前后端传输数据的编码格式(contentType)中推导request.POST只能接收username=junjie&age=18
这类的格式,那么是否可以推导前端返回JSON在reuqest.POST
中肯定无法找到。
代码验证:
def ab_ajax(request):print(request.POST)return render(request,'ab_ajax.html')
补充:如何判断当前请求是否为ajax请求?
request.is_ajax() # 判断当前请求是否是ajax请求,返回布尔值。
现在想想前后端数据交互,基于网络传输时,是什么格式?
二级制格式。
def ab_ajax(request):if request.is_ajax():# print(request.is_ajax())print(request.body) # b'{"username":"junjie","age":18}'return render(request, 'ab_ajax.html')
后端拿到二进制格式的JSON格式字符串。Django针对json格式数据后端需要手动处理。
后端如何处理json格式字符串
import json
def ab_ajax(request):if request.is_ajax():# print(request.is_ajax())# print(request.body)# json_bytes = request.body # 获取到前端发送过来的二进制json格式数据# json_str = json_bytes.decode('utf8') # 解码,utf8格式# json_loads = json.loads(json_str) # 反序列化至数据初始格式# print(json_loads) # {'username': 'junjie', 'age': 18}json_bytes = request.bodyjson_dict = json.loads(json_bytes)print(json_dict) # {'username': 'junjie', 'age': 18}# json.loads括号内如果传入一个二进制数据,内部会自动解码再返序列化return render(request, 'ab_ajax.html')
总结,ajax发送json格式数据需要注意的点:
- contentType 参数 指定成 : application/json
- 数据必须是真正的json格式数据
- Django后端不会处理json格式数据,需要到request.body获取并处理
Ajax发送文件
ajax发送文件需要借助于js内置对象FormData
<script>//点击按钮向后端发送普通键值对和文件数据$('#d4').click(function (){//1.利用FormData内置对象let obj = new FormData();//2.添加普通的键值对obj.append('username',$('#d1').val()); //val()// 取得第一个匹配元素的当前值 等同于value()obj.append('password',$('#d2').val());//3.添加文件对象,$('#d3')取索引0,转为原生jQuery对象即原生标签对象,再用files[0]就获得用户传的文件对象obj.append('myfile',$('#d3')[0].files[0])//4.将对象基于ajax发送到后端$.ajax({url:'',type:'post',data:obj, //直接将对象放在data中即可// ajax 发送文件必须指定两个参数contentType:false, //告诉浏览器不需要带任何编码,Django后端能够自动识别formdata对象,processData: false, //告诉浏览器,不要对数据进行任何处理,原封不动发送到后端。success:function (args){}})})
</script>
def myfile(request):if request.is_ajax():if request.method == 'POST':print(request.POST) # <QueryDict: {'username': ['junjie'], 'password': ['123']}>print(request.FILES) # <MultiValueDict: {'myfile': [<InMemoryUploadedFile: 截屏2022-03-02 22.19.54.png (image/png)>]}>return render(request, 'myfile.html')
django后端会自动识别formdata对象,将前端返回的数据防止对应的请求中。
总结,ajax发送文件需要注意的点:
需要利用内置对象FormData,普通键值对和文件都能发送
obj.append('username',$('#d1').val()); obj.append('password',$('#d2').val()); obj.append('myfile',$('#d3')[0].files[0])
需要指定两个关键性的参数
contentType: false processData: false
Django后端能够直接识别formdata对象,并且能够将内部的普通键值对自动解析并封装到你request.POST中,文件数据对象自动解析并封装到reuqest.FILES中
Django自带的序列化组件(drf做铺垫)
借助于模板语法前端显示数据对象。
但是,由此前端能够显示用户对象是借助了模板语法,如果现在做一个前后端交互,前端不是Django框架, 前后端分离,那么此时无法借助于模板语法,就需要手撸前后端交互,前后端交互就要使用到JSON格式。
将后端数据结构构造为列表套字典[{},{},{}...]
,为什么要构造成列表套字典呢?
首先数据有多个,列表套字典在后端有对应的数据,在JSON,JS中也有对应的数据,恰好可以实现前后端交互,JSON可以序列化列表格式,字典格式也可以,前端JS反序列化后可以得到数组套一个个的自定义对象,再通过for循环可以拿到一个个的自定义对象,再通过.
点的方式就可以取值。
后端逻辑代码:
def gender(request):user_queryset = models.User.objects.all()user_list = []for i in user_queryset:tmp = {'pk':i.pk,'username':i.username,'age':i.age,'gender':i.get_gender_display() # models.py中性别使用了choice参数,取值方式改变了。}user_list.append(tmp)return JsonResponse(user_list,safe=False)
此时返回给前端的数据格式为列表套字典,字典中有一个个键值对 。
做前后端分离项目,后端要将数据代码处理并序列化到前端。
上述代码为手动更改数据类型为JSON,但是如果数据成百上千也要手动吗?
模块:from django.core import serializers,自动将数据编程json格式字符串。
from django.core import serializersdef gender(request):user_queryset = models.User.objects.all()res = serializers.serialize('json', user_queryset)return HttpResponse(res)
后端写接口就是利用序列化组价渲染数据并写一个接口文档,比如,告诉前端,gender中的数字代表什么。
Ajax 发送json格式数据以及发送文件(FormData)和自带的序列化组件: serializers相关推荐
- 使用Qt通过Post发送Json格式数据
一.简介 1.任务目标 使用Qt通过post发送Json格式数据,或者以表单形式发送数据到服务器 2.环境简介 系统:Windows 10 Qt版本:5.7 二.内容准备 1.关于Qt 1.使用Pos ...
- postman 发送json 格式数据
postman 发送json 格式数据 hearder 设置 body 设置 {"id": "61252255","primary_content&q ...
- php 如何发送json数据格式,Php如何使用curl发送json格式数据实例
Php 如何使用curl发送json格式数据实例 Php 如何使用curl发送json格式数据实例 这篇文章主要介绍了php使用curl发送json格式数据的实例,大家参考使用吧 代码如下: $url ...
- HTTP get请求发送JSON格式数据
get请求一般不建议发送JSON格式的数据,单总有一些奇葩系统要求 分享下本人对接途牛 传递get请求 json数据的方法 第一步:平常的get请求不要想了 直接继承 import org.apach ...
- Ajax 提交json格式数据给后台
Ajax 提交json格式数据 在实际的开发当中,尤其是在前后端分离的项目中,传输数据都是以json格式进行传输的,所以对于json格式数据的情求和响应的学习十分重要. 1.前端提交json格式数据 ...
- 导入数据任务(id:373985)异常, 错误信息:解析导入文件错误,请检查导入文件内容,仅支持导入json格式数据及excel文件
导入数据任务(id:373985)异常, 错误信息:解析导入文件错误,请检查导入文件内容,仅支持导入json格式数据及excel文件 参考文章: (1)导入数据任务(id:373985)异常, 错误信 ...
- 导入数据任务(id:373985)异常, 错误信息:解析导入文件错误,请检查导入文件内容,仅支持导入json格式数据及excel文件...
小程序导入,别人导出的数据库json文件,错误信息如下: 导入数据库失败, Error: Poll error, 导入数据任务(id:373985)异常,错误信息:解析导入文件错误,请检查导入文件内容 ...
- ajax的几种格式,jQuery-----jQuery的几种ajax获取json格式数据的方法
该楼层疑似违规已被系统折叠 隐藏此楼查看此楼 后台将对象转换成json格式的字符串 public StringBuilder DataSetToJson(DataSet ds) {//把**中的数据转 ...
- 【spring-boot】spring-boot通过浏览器发送json格式数据,controler的处理
1.我们使用Postman软件工具向spring-boot发送post形式的数据,如下: 2.再来看一下我们的实体类的代码: RespCode.java package com.springboot. ...
最新文章
- php mysql预处理_PHP MySQL 预处理语句
- 管理类业务系统菜单部分美化经验分享,把所有好的东西拿过来拼凑并不容易能形成整体的效果...
- 手游 android 分辨率 适配,安卓不得不玩的神作,十大超高画质手游(安卓)
- python怎么判断一个文件是否存在-python怎么判断一个目录下是否存在某个文件??谢啦!...
- 资深数据大牛《教你如何从零开始做大数据底层架构》!(转)
- 【转载】Instagram架构分析笔记
- Java 8日期和时间
- 蓝桥杯试题 算法提高 数组求和
- 开源 java CMS - FreeCMS2.8 数据对象 site
- python的抽象类详解_第7.19节 Python中的抽象类详解:abstractmethod、abc与真实子类...
- 图片 和 base64 互转
- 每天Leetcode 刷题 初级算法篇-颠倒二进制位
- JQuery操作cookie插件
- 【数据结构笔记】Leetcode买卖股票的最佳时机 系列总结
- java for语句_Java for循环语句
- 【概率论】标准正态分布及概率表
- 基于SSM框架的志愿者管理系统
- php文件转换为mp4,PHP转换视频为MP4并获取预览图的实例分享
- 前端战五渣学JavaScript——深克隆(深拷贝)
- 朝向look at和lookRotation