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 相关文章推荐
jquery HotKeys轻松搞定键盘事件代码
Aug 30 Javascript
Jquery实现无刷新DropDownList联动实现代码
Mar 08 Javascript
location.search在客户端获取Url参数的方法
Jun 08 Javascript
扩展jquery实现客户端表格的分页、排序功能代码
Mar 16 Javascript
js下拉框二级关联菜单效果代码具体实现
Aug 03 Javascript
Javascript获取统一管理的提示语(message)
Feb 03 Javascript
浅析Javascript中bind()方法的使用与实现
Apr 29 Javascript
JavaScript中的对象继承关系
Aug 01 Javascript
vuejs开发组件分享之H5图片上传、压缩及拍照旋转的问题处理
Mar 06 Javascript
详解vue-cli+es6引入es5写的js(两种方法)
Apr 19 Javascript
vue - props 声明数组和对象操作
Jul 30 Javascript
vue mvvm数据响应实现
Nov 11 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
Smarty模板快速入门
2007/01/04 PHP
php程序总是提示验证码输入有误解决方案
2015/01/07 PHP
PHP的文件操作与算法实现的面试题示例
2015/08/10 PHP
PHP 将dataurl转成图片image方法总结
2016/10/14 PHP
php中遍历二维数组并以表格的形式输出的方法
2017/01/03 PHP
PHP实现对文件锁进行加锁、解锁操作的方法
2017/07/04 PHP
php关联数组与索引数组及其显示方法
2018/03/12 PHP
图像替换新技术 状态域方法
2010/01/28 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(一)让静态人物动起来
2013/01/23 Javascript
js统计页面的来访次数实现代码
2014/05/09 Javascript
javascript中的正则表达式使用指南
2015/03/01 Javascript
javascript实现网页背景烟花效果的方法
2015/08/06 Javascript
js实现文字在按钮上滚动的方法
2015/08/20 Javascript
基于BootStrap实现局部刷新分页实例代码
2016/08/08 Javascript
js方法数据验证的简单实例
2016/09/17 Javascript
JS实现多级菜单中当前菜单不随页面跳转样式而发生变化
2017/05/30 Javascript
浅谈Koa2框架利用CORS完成跨域ajax请求
2018/03/06 Javascript
如何检查一个对象是否为空
2019/04/11 Javascript
node+vue实现文件上传功能
2020/05/28 Javascript
JavaScript中reduce()的5个基本用法示例
2020/07/19 Javascript
js实现简单抽奖功能
2020/11/24 Javascript
JavaScript 如何计算文本的行数的实现
2020/09/14 Javascript
Python编程对列表中字典元素进行排序的方法详解
2017/05/26 Python
在Python程序员面试中被问的最多的10道题
2017/12/05 Python
python提取照片坐标信息的实例代码
2019/08/14 Python
关于ResNeXt网络的pytorch实现
2020/01/14 Python
Python中的X[:,0]、X[:,1]、X[:,:,0]、X[:,:,1]、X[:,m:n]和X[:,:,m:n]
2020/02/13 Python
解决Python数据可视化中文部分显示方块问题
2020/05/16 Python
解决Pycharm 中遇到Unresolved reference 'sklearn'的问题
2020/07/13 Python
Python计算矩阵的和积的实例详解
2020/09/10 Python
html5音频_动力节点Java学院整理
2018/08/22 HTML / CSS
Sixt美国租车:高端豪华车型自驾体验
2017/09/02 全球购物
美国领先的在线邮轮旅游公司:CruiseDirect
2018/06/07 全球购物
小学学雷锋活动总结
2014/04/25 职场文书
2015个人年度工作总结范文
2015/05/28 职场文书
vue 实现弹窗关闭后刷新效果
2022/04/08 Vue.js