色综合图-色综合图片-色综合图片二区150p-色综合图区-玖玖国产精品视频-玖玖香蕉视频

您的位置:首頁技術文章
文章詳情頁

vue 中 get / delete 傳遞數組參數方法

瀏覽:16日期:2022-10-01 16:04:37

在前后端交互的時候,有時候需要通過 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、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’

安裝

npm install qs

使用

//在 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以上版本的新手程序員 不了解怎樣傳遞參數的僅供參考

<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <title>Document</title></head><body>/*為了前后端更好的交互效果 引入axios.js 這個js文件*/ <script type='text/javascript' src='http://www.lshqa.cn/bcjs/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>

向后臺發起請求的代碼( 有的公司服務端的程序員不給寫 ) 前端程序員僅供才考

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 傳遞數組參數內容請搜索好吧啦網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持好吧啦網!

標簽: Vue
相關文章:
主站蜘蛛池模板: 国产成人一区二区三区免费观看 | 视频久久精品 | 91久久青青草原免费 | 台湾三级香港三级在线中文 | 成年人福利视频 | 欧美13一14周岁a在线播放 | 国产欧美久久久另类精品 | 高清一区二区在线观看 | 国产免费观看a大片的网站 国产免费黄色网址 | 亚洲一区二区三区四区在线 | 国产午夜不卡在线观看视频666 | 波多野结衣一区二区三区高清在线 | 欧美成人一级视频 | 欧美日韩一区二区不卡三区 | 成人久久免费视频 | 国内成人精品亚洲日本语音 | 欧美级 | 操欧美女| 欧美成人性色大片在线观看 | 久久精品国产精品亚洲精品 | 黄www.| 亚洲视频一 | 草草在线免费视频 | 亚洲自拍偷拍网 | 手机在线视频一区 | 欧美成人毛片免费网站 | 日韩字幕 | 91精品国产爱久久久久久 | 国产特黄一级一片免费 | 国产二区精品 | 欧美成人免费观看bbb | 亚洲天堂视频在线观看 | 亚洲bt欧美bt国产bt | 天堂一区二区三区在线观看 | 中文字幕乱码中文乱码综合 | www.成年人视频| 三级网站在线 | 欧美在线一区二区三区不卡 | 成人软件18免费 | 在线视频 日韩 | 精品久久成人免费第三区 |