axios的兩種方式,小程序post傳參，Vue中 axios的get,post方法（問號傳參）
<script type="text/javascript" src='js/vue.js'></script>
<script type="text/javascript" src='js/axios.js'></script> <!--記得引入-->
<div id="app">
<button v-on:click="get3()">請求</button>
<ul>
<li v-for="(list,index) in lists" ::key="index">{{list.name}}</li>
</ul>
<hr>
<input type="text" v-model="obj.type">
<input type="text" v-model="obj.name">
<button @click="send2()">發送數據</button>
<ul>
<li v-for="(item, index) in items" :key="index">{{item.type}},{{item.name}}</li>
</ul>
</div><script>
new Vue({
el:'#app',
data:{
lists:[],
obj:{type:1,name:2},
items:[]
},
methods:{
//get 第一種方法
get:function(){
axios({
method:'get',
url:'//localhost:3333/list'
}).then(res=>{
console.log(res);
this.lists=res.data.result;
}).catch(function(error){
console.log(error)
})
},
//get 第二種方法
get2:function(){
axios.get('//localhost:3333/list')
.then(res=>{
console.log(res);
this.lists=res.data.result;
}).catch(function(error){
console.log(error)
})
},
//get 第三種方法 問號傳參
get3:function(){
axios.get('//localhost:3333/list',{params:this.obj} //請求的地址是參數的形式 //localhost:3333/list?type=1&name=2
).then(res=>{
console.log(res);
this.lists = res.data.result;
}).catch(error=>{
console.log(error)
})
},
//send 第一種方法
send(){
axios({
method:'post',
url:'//localhost:3333/list_add',
data:this.obj
}).then((res)=>{
console.log(res);
this.items=res.data.result;
}).catch(function(error){
console.log(error);
})
},
//send 第二種方法
send2(){
axios.post('//localhost:3333/list_add',this.obj
).then((res)=>{
console.log(res);
this.items=res.data.result;
}).catch(function(error){
console.log(error);
})
},
}
})
</script>
