vue webpack中使用ajax傳輸資料給後臺
在使用資料傳輸中,大多數採用的都是ajax技術,那麼在vue中怎樣使用ajax技術呢?本篇將帶你入門vue axios中ajax技術。
1、基本配置
(1)首先在你的vue專案下配置對應的檔案axios
下載axios元件,最終放置在node_modules\axios\dist中
npm install axios -S
(2)配置main.js中的內容
import axios from 'axios'
Vue.prototype.$ajax = axios
2、使用方法
<div class="form_submit">
<input type="button" value="提交" class="submit" @click="onClick(user,pass)"/>
</div>
方法:
onClick(value1,value2){
if(value1===''&& value2===''){
console.log("請輸入使用者名稱和密碼");
return false;
}
this.$ajax({
method: 'post',
url : "你的url位置",
data : {
user : this.user,
pass : this.pass
},
success : function(data) {
var message = $.parseJSON(data);//後臺返回的json資料需要轉為物件
vue.selectById=message;//把後臺返回的JSON資料賦給selectById
},
error : function(){
alert("錯誤");
}
});
console.log("提交成功!");
return true;
}
3、注意事項
介面要與後臺給的保持一致,不然出錯!