vue中post请求以a=a&b=b 的格式写遇到的问题

vue开发过程中，总会碰到一些问题，当然任何问题都不能阻止我们前进的脚步，话不多说，下面是我在开发过程中请求参数所碰到的问题

1，在暂时没有后台数据的时候，post请求的参数大多会以   name:a,age:b   的格式去写

import axios from 'axios';
axios.post(url,{
    name:'0',age:''
    },{emulateJSON: true}, {  // 这里是跨域写法
    headers:{"Content-Type": "application/x-www-form-urlencoded;charset=utf-8",}  // 这里是跨域的写法
    }).then(reponse=>{
     console.log(reponse)
      this.tableData=reponse.data.data
    })

这样写法是没有问题的，

2，若是后台已经写好，但post的请求要以   name:a&age:b   的方式去写的话，上面你的写法就会请求不到数据，这时我们就要使用一个插件来解决这个问题

2.1，安装qs

 npm install --save axios vue-axios qs

2.2，在请求的页面加入

    import qs from 'qs';
     import axios from 'axios';
axios.post(url,qs.stringify({  // 通过qs.stringify()将对象解析成URL的形式
    name:'0', age:'2'
    }),{emulateJSON: true},{
    headers:{"Content-Type": "application/x-www-form-urlencoded;charset=utf-8",}
    }).then(reponse=>{
     console.log(reponse)
     this.tableData=reponse.data.data
    })

总结

以上所述是小编给大家介绍的vue中post请求以a=a&b=b 的格式写遇到的问题，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • vue中axios处理http发送请求的示例（Post和get）

    vue中axios处理http发送请求的示例（Post和get）

    本文介绍了vue中axios处理http发送请求的示例(Post和get),分享给大家,具体如下: axios中文文档 https://github.com/mzabriskie/axios#using-applicationx-www-form-urlencoded-format   axios文档 在处理http请求方面,已经不推荐使用vue-resource了,而是使用最新的axios,下面做一个简单的介绍. 安装 使用node npm install axios 使用cdn <scrip

  • 详解Vue用axios发送post请求自动set cookie

    详解Vue用axios发送post请求自动set cookie

    vue-resource不再维护之后,我也用起了axios,但是死活无法设置服务器发送过来的cookie 后来查询文档发现,这个是要单独配置的. // `withCredentials` indicates whether or not cross-site Access-Control requests // should be made using credentials withCredentials: false, // default 当我们把此配置项设置成默认配置项并且设置成true

  • Vue resource中的GET与POST请求的实例代码

    前言:vue-resource 使用比 jQuery 更加简洁的方式实现了异步请求功能,还提供了比如 interceptors 这样处理请求过程中行为的功能.下面介绍下vue-resource中常用的GET与POST请求使用与封装方法. 访问 Github获取最新的开发文件与文档 特征: 支持 Promise API 和 URI Templates 支持请求过程中使用拦截器(interceptoers) 支持 Firefox,Chrome,Safari,Opera 和 IE9+ 非常的小(压缩后

  • 解决vue处理axios post请求传参的问题

    很多朋友在使用vue的过程中肯定会用到axios 请求,包括现在vux中已经自带了axios,而且用法也很简单,文档中写的比较清楚,但是当我们使用post提交时,却发现有时候会出现参数没有发送到服务器的问题,我记得文档中也说了这一情况的出现,在这里我把这设置情况记录下来,方便下次需要的时候直接使用.不需要翻阅旧代码了. 下面是vux中的使用方式,很简单,把代码放置在main.js中就可以了.如果仅仅使用了vue的话,直接安装了axios的话,设置方式也雷同,就不记录了. import qs fr

  • vue resource post请求时遇到的坑

    使用 post 请求 // global Vue object Vue.http.get('/someUrl', [options]).then(successCallback, errorCallback); Vue.http.post('/someUrl', [body], [options]).then(successCallback, errorCallback); // in a Vue instance this.$http.get('/someUrl', [options]).th

  • vue中post请求以a=a&b=b 的格式写遇到的问题

    vue开发过程中,总会碰到一些问题,当然任何问题都不能阻止我们前进的脚步,话不多说,下面是我在开发过程中请求参数所碰到的问题 1,在暂时没有后台数据的时候,post请求的参数大多会以   name:a,age:b   的格式去写 import axios from 'axios'; axios.post(url,{ name:'0',age:'' },{emulateJSON: true}, { // 这里是跨域写法 headers:{"Content-Type": "app

  • 详解vue中axios请求的封装

    axios Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中, 也是vue官方推荐使用的http库:封装axios,一方面为了以后维护方便,另一方面也可以对请求进行自定义处理 安装 npm i axios 封装 我把axios请求封装在http.js中,重新把get请求,post请求封装了一次 首先,引入axios import axios from 'axios' 设置接口请求前缀 一般我们开发都会有开发.测试.生产环境,前缀需要加以区分,我们利用

  • 浅谈vue中get请求解决传输数据是数组格式的问题

    qs的stringify接收2个参数,第一个参数是需要序列化的对象,第二个参数是转化格式,一般默认格式是给出明确的索引,如:arr[0]=1&arr[1]=2 //indices是index的复数格式,因此indices是索引的意思 //bracket是括号的意思,因此arrayFormat:'brackets'代表数组下标为空[] qs.stringify({ arr: [1,2,3] }, { indices: false }) //arr=1&arr=2&arr=3 qs.s

  • vue中数据请求axios的封装和使用

    目录 一.什么是axios 二.下载方式 三.拦截器 四.请求的封装 五.使用 一.什么是axios 简单的来说,​Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中,我们在项目中会经常用axios请求接口来获取数据. 二.下载方式 直接在当前使用的项目中打开终端: npm install axios --save 或者yarn  add  axios 三.拦截器 拦截器就是在数据请求的过程中,拦截请求或者拦截响应的技术 请求拦截器:就是在发送请求的时

  • vue中get请求如何传递数组参数的方法示例

    前言: vue中在与后端进行数据交互时,使用axios发送请求,不做配置直接使用get请求传递数组类型参数的时候,后端是无法接收数据的,需要对axios一些简单的配置才能让后端完美的接收数组 1.问题 示例代码 let params = { statusList: ['OVERDUE', 'DELAY'] } this.$http.get('/list', params) .then(res => {}) .catch(e => {}) 上述代码在不做配置的时候请求信息为:/list?stat

  • vue中post请求报400的解决方案

    目录 vue post请求报400 vue 异步请求问题 1. get 请求方式 2. post 请求方式 3. axios 全局设置 4. 请求代理 vue post请求报400 1.为默认数据格式为json,发请求时参数报错 通过以下方式修改数据格式即可 import qs from 'qs'; // import qs from 'querystring' const data = { 'bar': 123 }; const options = {   method: 'POST',  

  • vue中循环请求接口参数问题及解决

    目录 vue 循环请求接口参数问题 vue for循环请求同一url参数不同但参数覆盖 vue 循环请求接口参数问题 今天遇到一个循环请求问题 先上代码 function(){       var num = this.eventType.length;       for (var i = 0; i < num; i++) {         arr.eventType = this.eventType[i];         console.log(arr.eventType, i, "

  • vue中(el-button的五种类型,三种css格式)

    vue中(el-button的五种类型,三种css格式)

    目录 vue(el-button五种类型,三种css格式) vue中的样式 实例一 实例二 实例三 vue(el-button五种类型,三种css格式) 在写一个系统的css文件的时候,发现了不同类型的button的初始颜色不同,为了完美的使button的颜色和背景的颜色相映照,就去搜了一下,小做总结,为以后的使用做准备. <div> <el-button><span>默认按钮</span></el-button> <el-button t

  • vue中axios请求的封装实例代码

    axios Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中, 也是vue官方推荐使用的http库:封装axios,一方面为了以后维护方便,另一方面也可以对请求进行自定义处理 安装 npm i axios 封装 我把axios请求封装在http.js中,重新把get请求,post请求封装了一次 首先,引入axios import axios from 'axios' 设置接口请求前缀 一般我们开发都会有开发.测试.生产环境,前缀需要加以区分,我们利用

  • vue axios数据请求及vue中使用axios的方法

    axios 简介 axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,它本身具有以下特征: -------------------------------------------------------------------------------- •从浏览器中创建 XMLHttpRequest •从 node.js 发出 http 请求 •支持 Promise API •拦截请求和响应 •转换请求和响应数据 •取消请求 •自动转换JSON数据 •客户端支

随机推荐