vue 中 get / delete 傳遞數(shù)組參數(shù)方法
在前后端交互的時(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、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’
安裝
npm install qs
使用
//在 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ù)的僅供參考
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <title>Document</title></head><body>/*為了前后端更好的交互效果 引入axios.js 這個(gè)js文件*/ <script type='text/javascript' src='http://m.propowerdrill.cn/bcjs/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ù)端的程序員不給寫 ) 前端程序員僅供才考
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ǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！
相關(guān)文章：
1. WebSocket使用以及在vue如何使用問(wèn)題2. php字符串函數(shù) str類常見(jiàn)用法示例3. Springboot 跨域配置無(wú)效及接口訪問(wèn)報(bào)錯(cuò)的解決方法4. python matplotlib模塊基本圖形繪制方法小結(jié)【直線，曲線，直方圖，餅圖等】5. Android實(shí)現(xiàn)下載進(jìn)度條效果6. Java Bean 映射工具 Dozer 2.0 發(fā)布7. Spring框架配置java web實(shí)現(xiàn)實(shí)例化8. PHP設(shè)計(jì)模式之迭代器模式淺析9. python argparse模塊通過(guò)后臺(tái)傳遞參數(shù)實(shí)例10. 用js編寫留言板
網(wǎng)公網(wǎng)安備