vue中采用axios发送post请求

  这几天在使用vue中axios发送get请求的时候很顺手,但是在发送post请求的时候老是在成功的回调函数里边返回参数不存在,当时就纳闷了,经过查阅资料,终于得到了解决方案,在此做一总结:

  首先我们在运用npm install axios的时候就会默认安装qs,因此我们就得将qs引入到axios中,然后需要再通过实例化一个新的axios,并且设置他的消息头为‘content-type‘: ‘application/x-www-form-urlencoded‘

 1 let qs = require(‘qs‘);
 2 let instance = axios.create({
 3      headers: { ‘content-type‘: ‘application/x-www-form-urlencoded‘ }
 4  });
 5 let data = qs.stringify({
 6      "user_id": this.user_id,
 7      "cate_name": this.cateName
 8    });
 9 instance.post("./frontend/web/cate/create", data)
10     .then(res => {
11        if (res.status == 200) {
12          alert("添加成功!")
13          this.initTableData();
14        }
15      })
16      .catch(err => {
17        console.log(err);
18      });

这样就能解决vue中利用axios发送post请求失败的问题。

原文地址:https://www.cnblogs.com/xiaoyaoxingchen/p/8743781.html

时间: 2024-10-13 16:20:11

vue中采用axios发送post请求的相关文章

在vue中使用axios发送post请求,参数方式

由于后台接收的参数格式为FormData格式, 在axios中参数格式默认为, 在传参数前,将原先官方提供的格式 改为如下: axios({ url: '../../../room/listRoomPage', method: 'post', data: {offset: 0, limit: 9999, roomCode: "", roomtypeId: 0, floorId: 0}, transformRequest: [function (data) { var oMyForm =

vue中使用axios(异步请求)和mock.js 模拟虚假数据

一.使用axios 1.安装 npm install --save axios 2.引用 import Axios from 'axios' Vue.prototype.Axios = Axios 二.使用mock 1.安装 npm install --save mockjs 2.创建mock目录 3.创建mock.js 4.引用 import mockData from './mock/mock' 5.使用 this.Axios.post('/getNewsList/').then(funct

vue中使用vue-resource发送ajax请求

1 get请求 html代码: 界面如下: js代码: 2 post请求 html代码: 界面: js代码: 3 jsonp请求 原文地址:http://blog.51cto.com/11871779/2131133

在vue中使用axios实现跨域请求并且设置返回的数据的格式是json格式,不是jsonp格式

在vue中使用axios实现跨域请求 需求分析:在项目中需要抓取qq音乐的歌曲列表的数据,由于要请求数据的地址url=https://c.y.qq.com/splcloud/fcgi-bin/fcg_get_diss_by_tag.fcg.从qq音乐的官网上可以看到该请求的请求头中的referer中的域名是y.qq.com(发送请求页面的域名),而host的域名是c.y.qq.com(被请求页面的域名),由于两者不一样,所以不能通过前端直接发送请求给qq服务器去拿数据.这时候需要服务器做一个代理

vue项目中使用axios发送ajax

首先使用npm安装axios: 安装好后可以去package.json中查看相关依赖 在HOME.VUE中引入axios 在static目录下新建一个文件夹mock,在里面存放各种模拟数据 定义一个获取首页数据的方法,把获取到的数据打印出来 获取成功: 在本地测试的时候需要使用mock数据,但是在正式上线或者和服务器联调的时候需要把本地的地址改成获取数据api的地址,有时候请求很多,批量修改就可能出现麻烦 在config目录中index.js中proxyTable做如下修改就可以实现 接下来把获

vue中使用axios处理post方法导出excel表格(后端返回文件流)

使用: vue.axios 接口要求: post方法.入参为json格式.出参文件流 1.请求函数 exportExcel: function(form) { return axios({ // 用axios发送post请求 method: 'post', url: '/serviceTime/exportData', // 请求地址 data: form, // 参数 responseType: 'blob', // 表明返回服务器返回的数据类型 headers: { 'Content-Typ

vue使用fetch.js发送post请求java后台无法获取参数值

问题:前台vue使用fetch.js发送post请求后,后台 request.getParameter()无法获取到参数值 思路:查阅后,原因为fetch中头文件Content-type这个Header为application/x-www-form-urlencoded导致request请求中的form data变成request payload 处理办法:后台controller中使用流接受数据后,在进行查询操作既可. vue代码 /** * 获取行业大类 */ export const ha

06 vue中使用axios跨域

本节将展示如果通过axios+proxyTable完成跨域请求并显示数据. 1.前提约束 完成nodejs,vue-cli,webpack,webpack-dev-server的安装 https://www.jianshu.com/p/eb4d9e132f62 2.操作步骤 完成vue项目中加入easytable[这时是固定数据] https://www.jianshu.com/p/bf5abb37eb3f 下载axios依赖包 cd vue-easytable cnpm install axi

通过在jquery中添加函数发送ajax请求来加载数据库数据,以json的格式发送到页面

通过在jquery中添加函数发送ajax请求来加载数据库数据,以json的格式发送到页面 从数据库中查询仓库信息,显示在下拉菜单中: 首先,引入js插件,这里使用jquery-1.8.3.js <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.8.3.js"></script> 当页面加载完成后,就应该发送ajax请求到数据库,