axios POST提交数据的三种请求方式写法示例

 更新时间:2023年09月01日 09:27:54   作者:Awbeci  
这篇文章主要介绍了axios POST提交数据的三种请求方式写法示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

1、Content-Type: application/json

import axios from 'axios'
let data = {"code":"1234","name":"yyyy"};
axios.post(`${this.$url}/test/testRequest`,data)
.then(res=>{
    console.log('res=>',res);            
})

2、Content-Type: multipart/form-data

import axios from 'axios'
let data = new FormData();
data.append('code','1234');
data.append('name','yyyy');
axios.post(`${this.$url}/test/testRequest`,data)
.then(res=>{
    console.log('res=>',res);            
})

3、Content-Type: application/x-www-form-urlencoded

import axios from 'axios'
import qs from 'Qs'
let data = {"code":"1234","name":"yyyy"};
axios.post(`${this.$url}/test/testRequest`,qs.stringify({
    data
}))
.then(res=>{
    console.log('res=>',res);            
})

总结

1、从jquery转到axios最难忘的就是要设置Content-Type,还好现在都搞懂了他们的原理

2、上面三种方式会对应后台的请求方式,这个也要注意,比如java的@RequestBody,HttpSevletRequest等等

以上就是axios POST提交数据的三种请求方式写法示例的详细内容,更多关于axios POST提交数据请求方式的资料请关注脚本之家其它相关文章!

相关文章

  • JavaScript实现简单获取当前网页网址的方法

    JavaScript实现简单获取当前网页网址的方法

    这篇文章主要介绍了JavaScript实现简单获取当前网页网址的方法,通过location对象的href方法来获取网址,非常简单实用,需要的朋友可以参考下
    2015-11-11
  • JavaScript字符和ASCII实现互相转换

    JavaScript字符和ASCII实现互相转换

    这篇文章主要介绍了JavaScript字符和ASCII实现互相转换,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-06-06
  • 如何在TypeScript中使用函数

    如何在TypeScript中使用函数

    这篇文章主要为大家介绍了如何在TypeScript中使用函数实例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-11-11
  • webpack的懒加载和预加载详解

    webpack的懒加载和预加载详解

    这篇文章主要为大家介绍了webpack的懒加载和预加载,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2021-12-12
  • JS实现json数组排序操作实例分析

    JS实现json数组排序操作实例分析

    这篇文章主要介绍了JS实现json数组排序操作,结合实例形式分析了javascript针对json数组的遍历、排序简单操作技巧,需要的朋友可以参考下
    2019-10-10
  • 浅析js 文字滚动效果

    浅析js 文字滚动效果

    文字滚动显示,是网页企业公告,文字链广告常用的一种效果,说不定在什么时候你就能看到它。
    2010-05-05
  • Webpack中使用环境变量的各种正确姿势

    Webpack中使用环境变量的各种正确姿势

    我们在开发项目中都会遇到这种场景,区分开发环境、生产环境、测试环境,不同场景请求不同的接口Api,这时候项目中配置的「环境变量」就登场啦,这篇文章主要给大家介绍了关于Webpack中使用环境变量的各种正确姿势,需要的朋友可以参考下
    2021-09-09
  • layui 设置table 行的高度方法

    layui 设置table 行的高度方法

    今天小编就为大家分享一篇layui 设置table 行的高度方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • javascript判断css3动画结束 css3动画结束的回调函数

    javascript判断css3动画结束 css3动画结束的回调函数

    本文主要给大家介绍的是如何使用javascript判断CSS3动画效果结束,主要是使用了javascript的回调函数,其思路是一旦动画或变换结束,回调函数就会触发。不再需要大型类库支持,非常的简单实用,推荐给大家。
    2015-03-03
  • 实现只能输入数字的input不用replace方法

    实现只能输入数字的input不用replace方法

    只能输入数字在以往都是使用replace方法实现的,在本文你将学习到不使用它依然可以实现,具体代码如下,感兴趣的朋友可以参考下
    2013-09-09

最新评论