vue 传递数组参数 vue 中 get / delete 传递数组参数方法
三个木马人 人气:0想了解vue 中 get / delete 传递数组参数方法的相关内容吗,三个木马人在本文为您仔细讲解vue 传递数组参数的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:vue,,传递数组参数,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) })
加载全部内容