ajax技術可以在不刷新整個頁面的情況下改變局部網頁,這是實現前端開發的非常重要的技術之一。而在vue中,使用ajax傳參是常見的操作。以下將詳細介紹vue中ajax傳參的具體實現方法。
首先,我們需要引入vue的ajax庫,即vue-resource。在html中加入下面的代碼:
<script src="https://cdn.jsdelivr.net/vue.resource/1.3.1/vue-resource.min.js"></script>
然后,在vue實例中聲明并使用vue-resource,如下所示:
new Vue({
el: '#app',
data: {},
methods: {
fetchData: function(param) {
this.$http.get('api/data', {params: param}).then(function(response) {
console.log(response.body);
}, function(response) {
console.error(response);
});
}
}
})
代碼解釋:
- 引入了vue-resource庫后,就可以在vue的實例內使用$http來發起http請求。
- 這里使用get請求,同時傳入api的地址和一個參數對象,參數對象中包含需要傳遞的參數。
- 在請求成功與失敗的回調函數中,分別對返回結果進行處理。
在需要調用ajax請求的地方,可以通過以下方式調用:
vm.fetchData({name: 'vue', version: '2.0'});
以上代碼中,fetchData是在vue實例中聲明的方法。在方法中,我們將參數對象傳遞給get請求的params參數中。在調用fetchData方法時,傳入一個對象作為參數即可。
除了get請求外,我們還可以使用vue-resource庫來發送post請求。post請求的實現方式與get請求類似,如下所示:
new Vue({
el: '#app',
data: {},
methods: {
saveData: function(param) {
this.$http.post('api/data', param).then(function(response) {
console.log(response.body);
}, function(response) {
console.error(response);
});
}
}
})
與get請求類似,我們傳遞的參數對象同樣作為post請求的參數。在vue-resource的post請求中,不需要顯式地傳遞params參數。
最后要提醒大家的是,在實際的開發過程中,我們需要根據具體的業務情況來確定需要傳遞的參數類型與參數個數,并且需要處理相應的錯誤情況。只有在充分了解業務需求的情況下,才能順利地進行接口設計與實現,避免出現一些無法預料的意外情況。
上一篇day json
下一篇date轉json格式化