vue中getdelete传递数组参数⽅法
在前后端交互的时候，有时候需要通过 get 或者 delete 传递⼀个数组给后台，但是这样直接传递后台⽆法接收数据，因为在传递的过程中数组参数会被转译，结果如下：
解决办法：
使⽤ 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'
quest.use(request => {
if (hod === 'delete' || hod === 'get') {
request.paramsSerializer = function(params) {
return qs.stringify(params, { arrayFormat: 'repeat' })
}
}
return request
},(error) =>{
ject(error);
})
知识点扩展：Vue中的Get , Delete , Post , Put 传递参数
刚刚接触Vue2.5以上版本的新⼿程序员不了解怎样传递参数的仅供参考
vue json字符串转数组
<!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 请求
<('localhost:3000/axios?id=123')
.then(function(ret){
console.log(ret.data)
})
// restful 格式的 get 请求
<('localhost:3000/axios/123')
.then(function(ret){
console.log(ret.data)
})
// 携带参数的 get 请求
<('localhost:3000/axios', {
params: {
id: 789
}
}).then(function(ret) {
console.log(ret.data)
})
// // axios delete 请求传参
axios.delete('localhost:3000/axios', {
params: {
id: 111
}
}).then(function(ret) {
console.log(ret.data)
})
//-----------------------------------
// 使⽤ axios 进⾏ post 请求，默认传递 json 数据
axios.post('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('localhost:3000/axios', params)
.then(function (ret) {
console.log(ret.data)
})
// axios put 请求传参
axios.put('localhost:3000/axios/123', {
uname: 'lisi',
pwd: 123
}).then(function(ret) {
console.log(ret.data)
})
// 对于 axios 来说，在 get 和 delete 请求中，参数要放⼊到 params 属性下
// 在 post 和 put 请求中，参数直接放⼊到对象中
</script>
</body>
</html>
向后台发起请求的代码( 有的公司服务端的程序员不给写 ) 前端程序员仅供才考
<('/adata', (req, res) => {
res.send('Hello axios!')
})
<('/axios', (req, res) => {
res.send('axios get 传递参数' + req.query.id)
})
<('/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 传递数组参数内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章希望⼤家以后多多⽀持！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。