Django+Vue项目学习第六篇:vue+django发送post请求,设置不同content-type,前后端如何处理参数
2023-09-11 14:21:25 时间
传送门:
Django+Vue项目学习第三篇:使用axios发送请求,解决跨域问题,调通前后端
Django+Vue项目学习第四篇:使用axios发送携带参数的get请求
Django+Vue项目学习第五篇:vue+django发送post请求,解决csrf认证问题
本篇继续介绍post请求传递不同类型参数时,前后端该如何处理
1、 Content-Type=application/x-www-form-urlencoded; charset=UTF-8
vue代码做如下修改
let payload1 = {
num: this.num1,
}
axios({ method: "post", headers: { 'Content-Type':'application/x-www-form-urlencoded; charset=UTF-8', 'X-CSRFToken': csrf_token, }, data: Qs.stringify(payload1), //发送post请求,使用data关键字接收请求参数 url: url2 + "/create_data/id" }).then(res => { this.info = res.data console.log(res) })
(1) headers中指明了 'Content-Type':'application/x-www-form-urlencoded; charset=UTF-8';
(2) 使用data关键字接收请求参数,并且使用 Qs.stringify() 对参数做了序列化处理;
django后端代码处理
def id(request): num = request.POST.get("num") # "Content-type","application/x-www-form-urlencoded" print(num) if num == "" or num is None: data1 = create_id(5) else: data1 = create_id(num) return HttpResponse(data1)
使用 request.POST.get("num") 获取前端请求中的参数
2、Content-Type=application/json
vue代码做如下修改
let payload1 = {
num: this.num1,
// csrfmiddlewaretoken: sessionStorage.getItem("csrf_token")
}
axios({ method: "post", headers: { 'Content-Type':'application/json', 'X-CSRFToken': csrf_token, }, data: payload1, // 也可以使用 JSON.stringify(payload1) url: url2 + "/create_data/id" }).then(res => { this.info = res.data console.log(res) })
(1) headers中指明了 'Content-Type':'application/json';
(2) 使用data关键字接收请求参数,参数部分可以不做处理,直接放{"xx":xx}这种格式;也可以使用 JSON.stringify(payload1)做一下处理
django后端代码处理
@require_http_methods(['GET', 'POST']) def id(request): num = json.loads(request.body).get("num") # "Content-type","application/json" print(num) if num == "" or num is None: data1 = create_id(5) else: data1 = create_id(num) return HttpResponse(data1)
先使用request.body获取请求体,然后用json.loads()解析,然后使用.get()获取具体参数的值
相关文章
- (尚031)Vue_案例_自定义事件(组件间通信第2种方式:vue自定义事件)
- 基于 Vue.js 之 iView UI 框架非工程化实践记要 使用 Newtonsoft.Json 操作 JSON 字符串 基于.net core实现项目自动编译、并生成nuget包 webpack + vue 在dev和production模式下的小小区别 这样入门asp.net core 之 静态文件 这样入门asp.net core,如何
- 【Python/前端】Django创建ws/websocket接口 并供前端(vue)消费
- 【Python】+Django+Vue+Element UI 实现图片上传功能
- django 生成复杂的 PDF 文件(数据较多时)
- Django和Angular.js模板标签冲突的解决方式
- 「基于Django的全民健康智慧中医数字服务平台」前端应用User功能(七)
- vue学习笔记九:Jquery VS Vue之遍历方法对照
- Vue 安装“npm install -g @vue/cli”发生npm WARN deprecated request@2.88.2: request has been deprecated,的错误解决方法
- Django+Bootstrap+Mysql 搭建个人博客(二)
- Django REST framework+Vue 打造生鲜超市(十一)
- Django REST framework+Vue 打造生鲜超市(一)
- vue基础 Vue.extend
- Django路由系统---django重点之url命名分组
- Django路由系统---django重点之url传递一个默认参数
- Vue 之 插件 轮播组件 vue-awesome-swiper 的简单使用整理
- django:将query-set类型转为json类型
- Django+Vue项目学习第九篇:vue项目部署到服务器
- Django+Vue项目学习第四篇:使用axios发送携带参数的get请求
- Django+Vue项目学习第二篇:vue项目创建
- Vue学习第14天——vue自定义事件及详细代码演示