vue 中 get / delete 傳遞數(shù)組參數(shù)方法
在前后端交互的時(shí)候，有時(shí)候需要通過 get 或者 delete 傳遞一個(gè)數(shù)組給后臺(tái)，但是這樣直接傳遞后臺(tái)無法接收數(shù)據(jù)，因?yàn)樵趥鬟f的過程中數(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.lshqa.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 來說，在 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. JavaScript中常見的幾種獲取元素的方式2. Xml簡(jiǎn)介_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理3. phpstudy apache開啟ssi使用詳解4. ASP.NET MVC使用異步Action的方法5. ajax實(shí)現(xiàn)頁面的局部加載6. jsp實(shí)現(xiàn)登錄驗(yàn)證的過濾器7. jsp文件下載功能實(shí)現(xiàn)代碼8. uni-app結(jié)合.NET 7實(shí)現(xiàn)微信小程序訂閱消息推送9. 爬取今日頭條Ajax請(qǐng)求10. 利用ajax+php實(shí)現(xiàn)商品價(jià)格計(jì)算
網(wǎng)公網(wǎng)安備