axios 前端与 Django 后端的 POST 交互

embedded/2024/10/18 18:38:24/

背景

自己在写一些油猴脚本,前端需要用 JS,后端是自己的服务,是用 Python 的 Django 框架完成的。

油猴脚本中需要通过 POST 方法,向后端传一些数据,所以前端我用的是 axios 库,后端需要用 Django 处理 POST 数据。

关于跨域名的问题,可以参考我的另一篇文章 Django 跨站请求伪造(csrf)防御——解决 POST 请求 403 问题

关于 POST 请求

POST 请求有多种类型,在 header 中的 Content-Type 中进行了定义。

Content-Type描述
application/json用于发送 JSON 格式的数据,axios 默认使用该格式
application/x-www-form-urlencoded用于提交表单数据,不支持传输文件,Django 文档中主要描述的是这种类型
multipart/form-data用于发送文件或同时发送文本数据和二进制数据
text/plain用于发送纯文本内容,不常用
application/xml用于发送或接收 XML 格式的数据,不常用

常用 POST 请求对应的发起与接收代码示例

application/json 类型

axios 发起,也是 axios 默认发起的 POST 请求时的类型:

data = { key: 'value'
}
headers = {'Content-Type': 'application/json'
}axios.post('url', data,{headers: headers
})
.then(function (response) {// 处理成功响应console.log(response.data);
})
.catch(function (error) {// 处理错误console.error(error);
});

Django 处理:

from django.http import JsonResponse
import jsondef my_json_post_view(request):if request.method == 'POST':data = json.loads(request.body)  # 解析JSON数据if 'key' in data.keys():# 处理数据...return JsonResponse({'message': f' key 的内容是 {data["key"]}'})

application/x-www-form-urlencoded 类型

axios 发起:

data = { key: 'value'
}
headers = {'Content-Type': 'application/x-www-form-urlencoded'
}axios.post('url', data, {headers: headers
})
.then(function (response) {// 处理成功响应console.log(response.data);
})
.catch(function (error) {// 处理错误console.error(error);
});

Django 处理:

def my_form_post_view(request):if request.method == 'POST':# 访问表单数据value = request.POST['key']# 处理数据...return HttpResponse('处理成功')  # 或者返回其他类型的响应

multipart/form-data 类型

嫌麻烦的,可以不用这个类型,因为我们可以偷懒一点,把文件进行 base64 编码,之后在 Django 后端的代码里进行 Base64 解码即可

axios 发起:

const formData = new FormData(); // 创建 FormData 实例
formData.append('file', fileInput.files[0]); // 添加文件字段和值(fileInput 是你的文件输入元素)
formData.append('textField', 'some text'); // 添加其他字段和值(如果需要的话)headers = {'Content-Type': 'multipart/form-data'
}axios.post('url', formData, {headers: headers
})
.then(function (response) {// 处理成功响应console.log(response.data);
})
.catch(function (error) {// 处理错误console.error(error);
});

Django 处理:

from django.core.files.uploadhandler.upload_handlers import upload_to_save_object
import osdef my_file_upload_view(request):if request.method == 'POST':uploaded_file = request.FILES['file']  # 获取上传的文件对象text_field = request.POST['textField'] # 获取其他字段# 保存文件到服务器等操作...return HttpResponse('文件上传成功')  # 返回响应

http://www.ppmy.cn/embedded/128529.html

相关文章

从2.x到3.x:Spring Boot升级遇到的问题!

从2.x到3.x:Spring Boot升级遇到的问题! 1.关于redis报错2.关于servlet报错2.关于Spring Security报错 报错内容采集 1.关于redis报错 报错内容:Property ‘spring.redis.host’ is Deprecated: Use ‘spring.data.redis.host’ instead.”、…

《15分钟轻松学Go》教程目录

在AI快速发展的时代,学习Go语言依然很有用。Go语言擅长处理高并发任务,也就是说可以同时处理很多请求,这对于需要快速响应的AI服务非常重要。另外,Go适合用来处理和传输大量数据,非常适合机器学习模型的数据预处理。 …

vue3中使用工具实现的打印功能总结

好记性不如烂笔头,如果不记录下来转眼就忘 本文只介绍这两种打印工具: print-jsvue3-print-nb 本次只因为需求更改为每页添加页眉而从 print-js 改为 vue3-print-nb 适用场景 print.js: 适合只有第一页有页眉,其他页没有的。…

Debezium系列之:实时从TDengine数据库采集数据到Kafka Topic

Debezium系列之:实时从TDengine数据库采集数据到Kafka Topic 一、认识TDengine二、TDengine Kafka Connector三、什么是 Kafka Connect?四、前置条件五、安装 TDengine Connector 插件六、启动 Kafka七、验证 kafka Connect 是否启动成功八、TDengine Source Connector 的使用…

【PCB】ADAS

1、布局设计 1.1.布局基本原则 1、元器件距离板边距离大于2mm,测试点距离板边大于3mm,BGA与晶体等易裂器件距离板边大于10mm 2、优先放置与结构关系密切的元器件,例如插件、开关等。其次规划好禁布区域及金边位置 3、高个电容、大电感、标贴连接器、BGA…

DOIP协议介绍2-Diagnostic power mode information request (0x4003)消息

DOIP(Diagnostic communication over Internet Protocol)是基于以太网的通讯协议,用于对UDS协议的数据进行传输,规范于ISO13400标准。DOIP的Type:Diagnostic power mode information request(0x4003&#x…

【深度学习】阿里云GPU服务器免费试用3月

【深度学习】阿里云GPU服务器免费试用3月 1.活动页面2.选择交互式建模PAI-DSW3.开通 PAI 并创建默认工作空间4.前往默认工作空间5.创建交互式建模(DSW)实例 1.活动页面 阿里云免费使用活动页面 2.选择交互式建模PAI-DSW 支持抵扣PAI-DSW入门机型计算用量…

嵌入式职业规划

嵌入式职业规划 在嵌入式的软件开发中,可以分为: 嵌入式MCU软件开发工程师; 嵌入式Linux底层(BSP)软件开发工程师; 嵌入式Linux应用开发工程师; 嵌入式FPGA算法开发工程师 对于前两个阶段 …