django简单的前后端分离的数据传输实例 axios


Posted in Javascript onMay 18, 2020

前端使用的是vue,下面是axios的主要代码

methods: {
   search: function () {
    var params = {
     content1: this.content1
    }
    this.$axios.post("http://127.0.0.1:8000/search/", params)
     .then((response)=> {
      console.log(response);
      this.response1=response.data['content1']
     })
     .catch(function (error) {
      console.log(error);
     })
   },
   find: function () {
    this.$axios.get("http://127.0.0.1:8000/find/", {
     params: {
      content2: this.content2
     }
    })
     .then((response)=> {
      console.log(response);
      this.response2=response.data['content2']
     })
     .catch(function (error) {
      console.log(error);
     })
   },
  },

后端是django框架,代码如下

@csrf_exempt
def search(request):
 post_content = json.loads(request.body, encoding='utf-8')['content1']
 print(type(post_content))
 print("post_content是:")
 print(post_content)
 return JsonResponse({'content1': 'post请求' + post_content * 2, 'msg': '错误信息'})
 
@csrf_exempt
def find(request):
 find_content = request.GET.get('content2')
 print("find_content是:")
 print(type(find_content))
 print(find_content)
 return JsonResponse({'content2': 'get请求' + find_content * 3})

这里主要是新手对axios和前后端分离开发的学习

补充知识:ajax在后端获取不到请求参数,但是前端已经传递过去了

使用ajax如果使用的是post方式提交数据,如果不设置content-type为application/x-www-form-urlencoded的话,默认的模式text/plain;charset=utf-8。

在tomcat中对于post提交方式又做了特殊的处理如果提交方式为post而content-type又不等于application/x-www-form-urlencoded,在tomcat底层是不会去解析请求参数的,也不会放到requestparameter的map中,因此使用request.getParameter(name)也就获取不到请求的参数了。

在浏览器中network中,一般post提交方式提交的数据也是会显示在form date下,而不是request payload下。

以上这篇django简单的前后端分离的数据传输实例 axios就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
遨游,飞飞,IE,空中网 浏览器无提示关闭方法
Jul 11 Javascript
深入解析JavaScript中的变量作用域
Dec 06 Javascript
JS 打印功能代码可实现打印预览、打印设置等
Oct 31 Javascript
JavaScript控制按钮可用或不可用的方法
Apr 03 Javascript
node vue项目开发之前后端分离实战记录
Dec 13 Javascript
React 高阶组件入门介绍
Jan 11 Javascript
简单明了区分escape、encodeURI和encodeURIComponent
May 26 Javascript
JavaScript实现表单注册、表单验证、运算符功能
Oct 15 Javascript
详解小程序input框失焦事件在提交事件前的处理
May 05 Javascript
微信小程序实现左侧滑栏过程解析
Aug 26 Javascript
vue实现购物车结算功能
Jun 18 Javascript
JavaScript 反射学习技巧
Oct 16 Javascript
vue+koa2搭建mock数据环境的详细教程
May 18 #Javascript
Vue 基于 vuedraggable 实现选中、拖拽、排序效果
May 18 #Javascript
react 生命周期实例分析
May 18 #Javascript
react使用CSS实现react动画功能示例
May 18 #Javascript
Node.js API详解之 net模块实例分析
May 18 #Javascript
Javascript实现简易天数计算器
May 18 #Javascript
微信小程序开发打开另一个小程序的实现方法
May 17 #Javascript
You might like
php 学习资料零碎东西
2010/12/04 PHP
一个PHP针对数字的加密解密类
2014/03/20 PHP
php使用百度天气接口示例
2014/04/22 PHP
PHP开启opcache提升代码性能
2015/04/26 PHP
php post换行的方法
2020/02/03 PHP
javascript 定义初始化数组函数
2009/09/07 Javascript
javascript中的new使用
2010/03/20 Javascript
JavaScript 面向对象的 私有成员和公开成员
2010/05/13 Javascript
javascript写的日历类(基于pj)
2010/12/28 Javascript
lyhucSelect基于Jquery的Select数据联动插件
2011/03/29 Javascript
IE的事件传递-event.cancelBubble示例介绍
2014/01/12 Javascript
AngularJS 依赖注入详解和简单实例
2016/07/28 Javascript
js实现table添加行tr、删除行tr、清空行tr的简单实例
2016/10/15 Javascript
jQuery实现最简单实用的分秒倒计时
2017/02/05 Javascript
推荐三款不错的图片压缩上传插件(webuploader、localResizeIMG4、LUploader)
2017/04/21 Javascript
JavaScript数据结构之优先队列与循环队列实例详解
2017/10/27 Javascript
vue 项目如何引入微信sdk接口的方法
2017/12/18 Javascript
ES6 Object属性新的写法实例小结
2019/06/25 Javascript
Vue实现简单计算器
2021/01/20 Vue.js
[03:57]2016完美“圣”典风云人物:rOtk专访
2016/12/09 DOTA
Python写的创建文件夹自定义函数mkdir()
2014/08/25 Python
python遍历文件夹,指定遍历深度与忽略目录的方法
2018/07/11 Python
python之super的使用小结
2018/08/13 Python
python实现画循环圆
2019/11/23 Python
html5使用window.postMessage进行跨域实现数据交互的一次实战
2021/02/24 HTML / CSS
哥伦比亚最大的网上商店:Linio哥伦比亚
2016/09/25 全球购物
苹果Mac升级:MacSales.com
2017/11/20 全球购物
美国山地自行车、露营、户外装备和服装购物网站:Aventuron
2018/05/05 全球购物
Yahoo-PHP面试题1
2016/07/20 面试题
用C或者C++语言实现SOCKET通信
2015/02/24 面试题
护士医德考评自我评价
2015/03/03 职场文书
学校实习推荐信
2015/03/27 职场文书
培训班通知
2015/04/25 职场文书
“5.12”护士节主持词
2015/07/04 职场文书
《小乌鸦爱妈妈》教学反思
2016/02/19 职场文书
零基础学java之循环语句的使用
2022/04/10 Java/Android