axios

最新推荐文章于 2024-12-18 19:24:58 发布

李帅帅哦

最新推荐文章于 2024-12-18 19:24:58 发布

阅读量108

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： axios

本文链接：https://blog.youkuaiyun.com/weixin_43151921/article/details/88728985

前端专栏收录该内容

73 篇文章

订阅专栏

本文介绍了axios，它是基于promise的ajax库，用于前后端交互。在vue中安装简单，可直接使用。但axios提交数据是对象形式，与平时ajax的key:value形式不同，这可能导致后端无法正常获取数据，文中还提及会给出解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先

大家都知道 axios 基于promise的 ajax库也就是前后端交互

vue安装这些不用教就一行代码

npm install axios --save

就直接安装就行了。，，，，然后就是直接用

但是

axios提交的时候是 对象形式 也就是说后台拿到的时候是这种

{  name : '无敌了哈哈哈哈’   ，age : '100000' }

你要是用 axios提交数据 时

可以看一下 axios默认这样提交数据

而平时ajax 是key:value 的形式提交数据

这也就导致了一些后端人员 根本不管你怎么提交数据的

他就写一套获取你提交的代码

他写的代码其实是一个固定形式

你必须是 key:value 形式的

他后端才能正常拿到数据 .

一旦你不是以这种方式提交

他那边就会获取不到你提交的数据

也就是显示你没有提交参数导致

解决方案直接复制能看得懂吧看不懂再炸我找我哦

//在vue中的组件中引用下面的内容即可   

import axios from 'axios'



axios({
   	method:"post",
   	//你的请求地址
    url:"http://msg.yicanying.com/plus/diyajaxlink.php",
    //这样写就是为了改变后台获取我们提交的数据方式  后端他不处理 我们前端自己处理
     headers:{
         'Content-type': 'application/x-www-form-urlencoded'
     },
     // 你所提交的对象是那些 key ：value
     data:{
         url:'bkjglhhlhuliu',
     },
     // 下面这几行不用管  就是固定写法而已   你要是追根究底也行 自己看  可以理解的
     transformRequest: [function (data) {
         let ret = ''
         for (let it in data) {
                 ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
         }
         return ret
     }],
 }).then((res)=>{
 // 打印后端返回的数据
     console.log(res.data);
 })

好了就到这里我也该睡觉了现在是 2019.03.21 晚上11.30 入职九龙玖第四天啊呜~ 啊呜~~ 啊呜~~~