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

 更新时间:2020年05月18日 11:38:25   作者:虔诚XY  
这篇文章主要介绍了django简单的前后端分离的数据传输实例 axios,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

前端使用的是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就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue中render函数和h函数以及jsx的使用方式

    vue中render函数和h函数以及jsx的使用方式

    这篇文章主要介绍了vue中render函数和h函数以及jsx的使用方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • Vue不同项目之间传递、接收参数问题

    Vue不同项目之间传递、接收参数问题

    这篇文章主要介绍了Vue不同项目之间传递、接收参数问题,主要针对是登录操作,我们为了完成SSO(Single Sign On)的效果,认证和授权在UC完成,用户发起资源请求,服务网关会进行过滤,本文给大家介绍的非常详细,需要的朋友可以参考下
    2023-04-04
  • vue+element实现表格新增、编辑、删除功能

    vue+element实现表格新增、编辑、删除功能

    这篇文章主要为大家详细介绍了vue+element实现表格新增、编辑、删除功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-05-05
  • 为什么推荐使用JSX开发Vue3

    为什么推荐使用JSX开发Vue3

    这篇文章主要介绍了为什么推荐使用JSX开发Vue3,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下
    2020-12-12
  • VUE+axios+php实现图片上传

    VUE+axios+php实现图片上传

    这篇文章主要为大家详细介绍了VUE+axios+php实现图片上传,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-08-08
  • vue基于better-scroll仿京东分类列表

    vue基于better-scroll仿京东分类列表

    这篇文章主要为大家详细介绍了vue基于better-scroll仿京东分类列表,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-06-06
  • vant组件库之tag渐变色不起作用的原因及解决

    vant组件库之tag渐变色不起作用的原因及解决

    这篇文章主要介绍了vant组件库之tag渐变色不起作用的原因及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • 在Vue3中为路由Query参数标注类型的方法

    在Vue3中为路由Query参数标注类型的方法

    这篇文章主要介绍了在Vue3中如何为路由Query参数标注类型,我们就针对这个话题如何为路由Query参数标注类型为例,看看Composable和IOC容器的代码风格究竟有什么不同,需要的朋友可以参考下
    2024-08-08
  • Vue组件中slot的用法

    Vue组件中slot的用法

    这篇文章交详细的给大家介绍了vue组件中slot的用法,主要是让组件的可扩展性更强,具体内容详情大家参考下本文
    2018-01-01
  • vue3项目启动自动打开浏览器以及server配置过程

    vue3项目启动自动打开浏览器以及server配置过程

    这篇文章主要介绍了vue3项目启动自动打开浏览器以及server配置过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03

最新评论