vue 中 get / delete 傳遞數(shù)組參數(shù)方法
在前后端交互的時候,有時候需要通過 get 或者 delete 傳遞一個數(shù)組給后臺,但是這樣直接傳遞后臺無法接收數(shù)據(jù),因為在傳遞的過程中數(shù)組參數(shù)會被轉(zhuǎn)譯,結(jié)果如下:
參數(shù):{ name : [ 1, 2, 3 ] }
轉(zhuǎn)譯效果:http://aaa.com?name[]=1&name[]=2&name[]=3
目標效果: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 請求攔截器里面
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 傳遞參數(shù)
剛剛接觸Vue2.5以上版本的新手程序員 不了解怎樣傳遞參數(shù)的僅供參考
<!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請求參數(shù)傳遞
// axios get請求傳參
// 傳統(tǒng)格式的 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)
})
// 攜帶參數(shù)的 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 數(shù)據(jù)
axios.post('http://localhost:3000/axios', {
'uname': 'lisi',
'pwd': 123
}).then(function(ret) {
console.log(ret.data)
})
// 使用 axios 進行 post 請求,傳遞 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 請求傳參
axios.put('http://localhost:3000/axios/123', {
uname: 'lisi',
pwd: 123
}).then(function(ret) {
console.log(ret.data)
})
// 對于 axios 來說,在 get 和 delete 請求中,參數(shù)要放入到 params 屬性下
// 在 post 和 put 請求中,參數(shù)直接放入到 對象中
</script>
</body>
</html>
向后臺發(fā)起請求的代碼( 有的公司服務(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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue2.0如何借用vue-pdf實現(xiàn)在線預(yù)覽pdf文件
這篇文章主要介紹了vue2.0如何借用vue-pdf實現(xiàn)在線預(yù)覽pdf文件問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
element-plus 在vue3 中不生效的原因解決方法(element-plus引入)
這篇文章主要介紹了element-plus 在vue3 中不生效的原因解決方法(element-plus引入),本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-08-08
vue-element-admin搭建后臺管理系統(tǒng)的實現(xiàn)步驟
本文主要介紹了vue-element-admin搭建后臺管理系統(tǒng)的實現(xiàn)步驟,文中通過示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2021-10-10
vuejs+element-ui+laravel5.4上傳文件的示例代碼
本篇文章主要介紹了vuejs+element-ui+laravel5.4上傳文件的示例代碼,具有一定的參考價值,有興趣的可以了解一下2017-08-08

