在前后端交互的時(shí)候，有時(shí)候需要通過(guò) get 或者 delete 傳遞一個(gè)數(shù)組給后臺(tái)，但是這樣直接傳遞后臺(tái)無(wú)法接收數(shù)據(jù)，因?yàn)樵趥鬟f的過(guò)程中數(shù)組參數(shù)會(huì)被轉(zhuǎn)譯，結(jié)果如下：
參數(shù)：{ name : [ 1, 2, 3 ] }
轉(zhuǎn)譯效果：http://aaa.com?name[]=1&name[]=2&name[]=3
目標(biāo)效果：http://aaa.com?name=1&name=2&name=3
解決辦法：
使用 qs 插件 將數(shù)組參數(shù)序列化
|
1
2
3
4
5
6
7
8
|
1、qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'indices' })// 輸出結(jié)果：'a[0]=b&a[1]=c'2、qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'brackets' })// 輸出結(jié)果：'a[]=b&a[]=c'3、qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'repeat' })// 輸出結(jié)果：'a=b&a=c'4、qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'comma' })// 輸出結(jié)果：'a=b,c' |
安裝
|
1
|
npm install qs |
使用
|
1
2
3
4
5
6
7
8
9
10
11
12
|
//在 axios 請(qǐng)求攔截器里面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);}) |
知識(shí)點(diǎn)擴(kuò)展：Vue中 的Get , Delete , Post , Put 傳遞參數(shù)
剛剛接觸Vue2.5以上版本的新手程序員 不了解怎樣傳遞參數(shù)的僅供參考
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
|
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body>/*為了前后端更好的交互效果 引入axios.js 這個(gè)js文件*/ <script type="text/javascript" src="js/axios.js"></script> <script type="text/javascript"> // axios請(qǐng)求參數(shù)傳遞 // axios get請(qǐng)求傳參 // 傳統(tǒng)格式的 get 請(qǐng)求 axios.get('http://localhost:3000/axios?id=123') .then(function(ret){ console.log(ret.data) }) // restful 格式的 get 請(qǐng)求 axios.get('http://localhost:3000/axios/123') .then(function(ret){ console.log(ret.data) }) // 攜帶參數(shù)的 get 請(qǐng)求 axios.get('http://localhost:3000/axios', { params: { id: 789 } }).then(function(ret) { console.log(ret.data) }) // // axios delete 請(qǐng)求傳參 axios.delete('http://localhost:3000/axios', { params: { id: 111 } }).then(function(ret) { console.log(ret.data) }) //----------------------------------- // 使用 axios 進(jìn)行 post 請(qǐng)求,默認(rèn)傳遞 json 數(shù)據(jù) axios.post('http://localhost:3000/axios', { 'uname': 'lisi', 'pwd': 123 }).then(function(ret) { console.log(ret.data) }) // 使用 axios 進(jìn)行 post 請(qǐng)求,傳遞 form 表單數(shù)據(jù) 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 請(qǐng)求傳參 axios.put('http://localhost:3000/axios/123', { uname: 'lisi', pwd: 123 }).then(function(ret) { console.log(ret.data) }) // 對(duì)于 axios 來(lái)說(shuō)，在 get 和 delete 請(qǐng)求中，參數(shù)要放入到 params 屬性下 // 在 post 和 put 請(qǐng)求中，參數(shù)直接放入到 對(duì)象中 </script></body></html> |
向后臺(tái)發(fā)起請(qǐng)求的代碼( 有的公司服務(wù)端的程序員不給寫(xiě) ) 前端程序員僅供才考
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
app.get('/adata', (req, res) => { res.send('Hello axios!')})app.get('/axios', (req, res) => { res.send('axios get 傳遞參數(shù)' + req.query.id)})app.get('/axios/:id', (req, res) => { res.send('axios get (Restful) 傳遞參數(shù)' + req.params.id)})app.delete('/axios', (req, res) => { res.send('axios get 傳遞參數(shù)' + req.query.id)})app.delete('/axios/:id', (req, res) => { res.send('axios get (Restful) 傳遞參數(shù)' + req.params.id)})app.post('/axios', (req, res) => { res.send('axios post 傳遞參數(shù)' + req.body.uname + '---' + req.body.pwd)})app.put('/axios/:id', (req, res) => { res.send('axios put 傳遞參數(shù)' + req.params.id + '---' + req.body.uname + '---' + req.body.pwd)}) |
到此這篇關(guān)于vue 中 get / delete 傳遞數(shù)組參數(shù)方法的文章就介紹到這了,更多相關(guān)vue 傳遞數(shù)組參數(shù)內(nèi)容請(qǐng)搜索服務(wù)器之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持服務(wù)器之家！
原文鏈接：https://blog.csdn.net/weixin_43299180/article/details/115012207
