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://www.leifengta.com.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. Android table布局開發(fā)實(shí)現(xiàn)簡(jiǎn)單計(jì)算器2. 理解PHP5中static和const關(guān)鍵字3. jQuery 實(shí)現(xiàn)DOM元素拖拽交換位置的實(shí)例代碼4. php模擬實(shí)現(xiàn)斗地主發(fā)牌5. IntelliJ IDEA安裝插件的方法步驟6. phpstorm恢復(fù)默認(rèn)設(shè)置的方法步驟7. Vue封裝一個(gè)TodoList的案例與瀏覽器本地緩存的應(yīng)用實(shí)現(xiàn)8. Python random庫(kù)使用方法及異常處理方案9. Vuex localStorage的具體使用10. .Net Core使用Coravel實(shí)現(xiàn)任務(wù)調(diào)度的完整步驟
網(wǎng)公網(wǎng)安備