vue 中 get / delete 传递数组参数方法
在前后端交互的时候，有时候需要通过 get 或者 delete 传递一个数组给后台，但是这样直接传递后台无法接收数据，因为在传递的过程中数组参数会被转译，结果如下：
参数：{ name : [ 1, 2, 3 ] }
转译效果：http://aaa.com?name[]=1&name[]=2&name[]=3
目标效果：http://aaa.com?name=1&name=2&name=3
解决办法：
使用 qs 插件 将数组参数序列化
1、qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'indices' })
// 输出结果：'a[0]=b&a[1]=c'
2、qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'brackets' })
// 输出结果：'a[]=b&a[]=c'
3、qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'repeat' })
// 输出结果：'a=b&a=c'
4、qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'comma' })
// 输出结果：'a=b,c'
安装
npm install qs
使用
//在 axios 请求拦截器里面
import qs from 'qs'
axios.interceptors.request.use(request => {
if (request.method === 'delete' || request.method === 'get') {
request.paramsSerializer = function(params) {
return qs.stringify(params, { arrayFormat: 'repeat' })
}
}
return request
},(error) =>{
return Promise.reject(error);
})
知识点扩展：Vue中 的Get , Delete , Post , Put 传递参数
刚刚接触Vue2.5以上版本的新手程序员 不了解怎样传递参数的仅供参考
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
/*为了前后端更好的交互效果 引入axios.js 这个js文件*/
<script type="text/javascript" src="js/axios.js"></script>
<script type="text/javascript">
// axios请求参数传递
// axios get请求传参
// 传统格式的 get 请求
axios.get('http://localhost:3000/axios?id=123')
.then(function(ret){
console.log(ret.data)
})
// restful 格式的 get 请求
axios.get('http://localhost:3000/axios/123')
.then(function(ret){
console.log(ret.data)
})
// 携带参数的 get 请求
axios.get('http://localhost:3000/axios', {
params: {
id: 789
}
}).then(function(ret) {
console.log(ret.data)
})
// // axios delete 请求传参
axios.delete('http://localhost:3000/axios', {
params: {
id: 111
}
}).then(function(ret) {
console.log(ret.data)
})
//-----------------------------------
// 使用 axios 进行 post 请求,默认传递 json 数据
axios.post('http://localhost:3000/axios', {
'uname': 'lisi',
'pwd': 123
}).then(function(ret) {
console.log(ret.data)
})
// 使用 axios 进行 post 请求,传递 form 表单数据
var params = new URLSearchParams();
params.append('uname', 'zhangsan');
params.append('pwd', '111');
axios.post('http://localhost:3000/axios', params)
.then(function (ret) {
console.log(ret.data)
})
// axios put 请求传参
axios.put('http://localhost:3000/axios/123', {
uname: 'lisi',
pwd: 123
}).then(function(ret) {
console.log(ret.data)
})
// 对于 axios 来说，在 get 和 delete 请求中，参数要放入到 params 属性下
// 在 post 和 put 请求中，参数直接放入到 对象中
</script>
</body>
</html>
向后台发起请求的代码( 有的公司服务端的程序员不给写 ) 前端程序员仅供才考
app.get('/adata', (req, res) => {
res.send('Hello axios!')
})
app.get('/axios', (req, res) => {
res.send('axios get 传递参数' + req.query.id)
})
app.get('/axios/:id', (req, res) => {
res.send('axios get (Restful) 传递参数' + req.params.id)
})
app.delete('/axios', (req, res) => {
res.send('axios get 传递参数' + req.query.id)
})
app.delete('/axios/:id', (req, res) => {
res.send('axios get (Restful) 传递参数' + req.params.id)
})
app.post('/axios', (req, res) => {
res.send('axios post 传递参数' + req.body.uname + '---' + req.body.pwd)
})
app.put('/axios/:id', (req, res) => {
res.send('axios put 传递参数' + req.params.id + '---' + req.body.uname + '---' + req.body.pwd)
})
到此这篇关于vue 中 get / delete 传递数组参数方法的文章就介绍到这了,更多相关vue 传递数组参数内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
相关推荐
-
详解vue嵌套路由-params传递参数
在嵌套路由中,父路由向子路由传值除了query外,还有params,params传值有两种情况,一种是值在url中显示,另外一种是值不显示在url中. 1.显示在url中 index.html <div id="app"> <!-- router-view 路由出口, 路由匹配到的组件将渲染在这里 --> <router-view></router-view> </div> main.js params传值是通过 :[参数值]
-
vue中路由参数传递可能会遇到的坑
前言 vue中路由跳转传参数有多种,自己常用的是下面的几种 通过router-link进行跳转 通过编程导航进行路由跳转 本文主要给大家介绍了关于vue路由参数传递遇到的一些坑,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 首先我的路由的定义 { path: '/b', name: 'B', component: resolve => require(['../pages/B.vue'], resolve) } 我从A组件跳转到B组件,并通过路由信息对象传递一些参数 this
-
vue中Npm run build 根据环境传递参数方法来打包不同域名
项目开发中,前端在配置后端api域名时很困扰,常常出现: 本地开发环境: api-dev.demo.com 测试环境: api-test.demo.com 线上生产环境: api.demo.com, 这次是在Vue.js项目中打包,教大家个方法: 使用 npm run build -- xxx ,根据传递参数xxx来判定不同的环境,给出不同的域名配置. 1.项目中/config/dev.env.js修改: 新增:HOST: '"dev"' 'use strict' const me
-
详解vue.js之props传递参数
本篇文章通过demo实例给大家详细分析了props传递参数的用法以及遇到问题后的解决办法,以下是全部内容. 前段时间用vue做一个后台管理系统,其中每一页都需要一个表格来展示信息.自然就想到了将表格提取出来做成公共组件,将不同页面的数据传入进行渲染,达到复用的目的. demo地址 1. 问题发现 在父组件中,需要向表格组件传递的数据有表格的内容数据tableData,表格的页面数据page. <div> <my-table :table-data="tableData"
-
vue中get请求如何传递数组参数的方法示例
前言: vue中在与后端进行数据交互时,使用axios发送请求,不做配置直接使用get请求传递数组类型参数的时候,后端是无法接收数据的,需要对axios一些简单的配置才能让后端完美的接收数组 1.问题 示例代码 let params = { statusList: ['OVERDUE', 'DELAY'] } this.$http.get('/list', params) .then(res => {}) .catch(e => {}) 上述代码在不做配置的时候请求信息为:/list?stat
-
vue 中 get / delete 传递数组参数方法
在前后端交互的时候,有时候需要通过 get 或者 delete 传递一个数组给后台,但是这样直接传递后台无法接收数据,因为在传递的过程中数组参数会被转译,结果如下: 参数:{ name : [ 1, 2, 3 ] } 转译效果:http://aaa.com?name[]=1&name[]=2&name[]=3 目标效果:http://aaa.com?name=1&name=2&name=3 解决办法: 使用 qs 插件 将数组参数序列化 1.qs.stringify({ a
-
php中使用url传递数组的方法
本文实例讲述了php中使用url传递数组的方法.分享给大家供大家参考.具体分析如下: 数组传递这么写: 复制代码 代码如下: echo"<a href=2.php?info=".base64_encode(serialize($information)).">info</a>" ; 数组接收: 复制代码 代码如下: $info = unserialize(base64_decode($_GET['info'])); 访问的话: 复制代码 代码
-
jquery ajax 向后台传递数组参数示例
需求: 在JS中向后台传递数组参数 分析: JS中的数组是弱类型的可以放任何类型(对象.基本类型),但是如果数组中放的是对象类型,传递到后台是显示的只能是对象字符串--[object Object],原因如下: 在后台接收的时候,只能用request来接收,request.getParameterValues()方法返回的是一个String[],所以,应该是在前台传输的时候调用了对象的toString()方法,那么如果依然想传递对象怎么办?凉拌! 但是可以使用JSON字符串来实现,在后台把JSO
-
vue中的get方法\post方法如何实现传递数组参数
目录 get方法\post方法如何传递数组参数 第一部分:vue中get方法如何传递数组参数 下面列出我的接口格式及解决方法的源码 vue get与post传参方式 1.post:用data传递参数 2.get:用params传递参数 3.delete:params传递参数 get方法\post方法如何传递数组参数 背景:项目中突然来了一个post方法传array数组的参数,且该数组参数是循环遍历所有元素按照get方法传参形式进行参数传递的,对于小白的我真的是一个打击呀.但是为了完成任务不能放弃
-
Vue中 axios delete请求参数操作
vue中axios 的delete和post,put在传值上有点区别 post和put有三个参数,url,data和config,所以在使用这两个时,可以写成axios.post(api,{id:1}),axios.put(api,{id:1}),但是delete只有两个参数:url和config,data在config中,所以需要写成 axios.delete(api,{data:{id:1}}) 如果是服务端将参数当作Java对象来封装接收则 参数格式为: {data: param} var
-
jQuery中通过ajax调用webservice传递数组参数的问题实例详解
下面通过实例给大家说明比较直观些,更方便大家了解. 本人的项目中通过jquery.ajax调用webservice. 客户端代码如下: $.ajax({ url: "test/xxx.asmx", type: 'POST', dataType: 'xml', timeout: , data: { name: "zhangsan", tags: ["aa", "bb", "cc"] }, error: fun
-
vue中filters 传入两个参数 / 使用两个filters的实现方法
先给大家介绍下vue中filters 传入两个参数 / 使用两个filters .vue 传入两个参数 <van-col>{{第一个参数|formatVisitTime(第二个参数)}}</van-col> 使用两个filters <van-tag plain :color="item.CreateTime(参数)|formatVisitDate(filters方法)|formatVisitDateColor(filters方法)">{{item.C
-
js传递数组参数到后台controller的方法
传递参数传递字符串,所以要把数组转换为字符串, var arr=[1,23,34,5]; var str = arr.toString(); str传递到后台,str.split(" , ");将字符串拆分得到元素. var arr=[1,23,34,5]; var str = arr.toString(); document.write(str); var getArr = str.split(","); for(var i=0;i<getArr.lengt
-
Restful传递数组参数及注解大全
RESTful 一种软件架构风格,设计风格而不是标准,只是提供了一组设计原则和约束条件.它主要用于客户端和服务器交互类的软件.基于这个风格设计的软件可以更简洁,更有层次,更易于实现缓存等机制. 需要传递数组参数的情况,如果是一般的form表单,可以直接定义参数类型为List<String>即可(不能定义为数组类型,否则只能得到一个null). 示例代码如下: @POST @Path("/user" ) public Response createUser(@FormPara
-
React和Vue中监听变量变化的方法
React 中 本地调试React代码的方法 yarn build 场景 假设有这样一个场景,父组件传递子组件一个A参数,子组件需要监听A参数的变化转换为state. 16之前 在React以前我们可以使用 componentWillReveiveProps 来监听 props 的变换 16之后 在最新版本的React中可以使用新出的 getDerivedStateFromProps 进行props的监听, getDerivedStateFromProps 可以返回 null 或者一个对象,如果