基于vue 添加axios組件,解決post傳參數為null的問題
更新時間：2018年03月05日 15:16:43 作者：0day__
下面小編就為大家分享一篇基于vue 添加axios組件,解決post傳參數為null的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
好，下面上貨。
1、安裝axios
npm install axios --save
2、添加axios組件
import axios from 'axios' axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'; axios.defaults.baseURL = 'http://localhost:7878/zkview'; Vue.prototype.$ajax = axios;
3、get請求
testGet: function () {
this.$ajax({
method: 'get',
url: '/test/greeting',
params: {
firstName: 'Fred',
lastName: 'Flintstone'
}
}).then(function (response) {
console.log(response);
}).catch(function (error) {
console.log(error);
});
},
4、post請求
testPost: function () {
var params = new URLSearchParams();
params.append('name', 'hello jdmc你好');
params.append('id', '2');
this.$ajax({
method: 'post',
url: '/test/greeting2',
data:params
// data: {id: '3', name: 'abc'}
}).then(function (response) {
console.log(response);
}).catch(function (error) {
console.log(error);
})
}
5、運行結果：
6、注意：
在使用post方式的時候傳遞參數有兩種方式，一種是普通方式，一種是json方式，如果后臺接受的是普通方式，那么使用上述方式即可。
普通的formed方式
var params = new URLSearchParams();
params.append('name', 'hello jdmc你好');
params.append('id', '2');
data:params
后臺接收參數：
public Student greeting2(int id,String name) {
json方式
data: {id: '3', name: 'abc'}
后臺接收參數
public Object greeting2(@RequestBody Object student) {
以上這篇基于vue 添加axios組件,解決post傳參數為null的問題就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了淺談Vue內置component組件的應用場景，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-03-03
本文主要介紹了Vue實現table列表項上下移動的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-04-04
這篇文章主要介紹了Vue3新增時自動獲取當前時間的操作方法,本文通過實例代碼圖文相結合給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧2024-07-07
這篇文章主要介紹了vue中復用vuex.store對象的定義，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
最近工作中遇到了npm?run?dev報錯這個問題,通過查找相關資料最終解決了,所以下面這篇文章主要給大家介紹了關于npm?run?dev失敗的詳細解決辦法,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-07-07
本文主要介紹了vue中動態(tài)修改img標簽中src的方法實踐,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2023-07-07
多人協作模式下，修改代理比較麻煩，而且很容易某個開發(fā)人員會修改了vue.config.js文件后提交了。接下來通過本文給大家分享Vue多環(huán)境代理配置方法思路詳解,需要的朋友可以參考下2019-06-06
Vue.nextTick是Vue官方給我們提供的一個API（方法），作用是在下次DOM更新循環(huán)結束之后執(zhí)行延遲回調。在修改數據之后立即使用這個方法，獲取更新后的DOM2021-04-04
路由懶加載是一種優(yōu)化技術，用于延遲加載應用程序中的路由組件，它可以提高初始加載速度并減少資源消耗，特別適用于大型單頁應用，下面我們就來看看它的原理與使用吧2023-08-08
vue封裝自定義指令之動態(tài)顯示title操作(溢出顯示,不溢出不顯示)
這篇文章主要介紹了vue封裝自定義指令之動態(tài)顯示title操作(溢出顯示,不溢出不顯示)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11