在前后端交互的時候，有時候需要通過 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
2
3
4
5
6
7
8
|
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' |
安裝
|
1
|
npm install qs |
使用
|
1
2
3
4
5
6
7
8
9
10
11
12
|
//在 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以上版本的新手程序員 不了解怎樣傳遞參數的僅供參考
|
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 這個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> |
向后臺發起請求的代碼( 有的公司服務端的程序員不給寫 ) 前端程序員僅供才考
|
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 傳遞參數' + 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 傳遞數組參數內容請搜索服務器之家以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持服務器之家！
原文鏈接：https://blog.csdn.net/weixin_43299180/article/details/115012207
