<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ajax</title>
</head>
<body>
<div id="app">
<h2>请输入你的姓名和年龄</h2>
<form action="">
<input type="text" v-model="name"><br>
<input type="text" v-model="age">
</form>
<button @click="requestByGet">GET</button>
<button @click="requestByPost">POST</button>
<button @click="requestByPostJson">POSTJson</button>
<p>{{msg}}</p>
</div>
<script src="../js/vue.js"></script>
<script src="../js/axios.js"></script>
<script>
const ax = axios.create({
baseURL: "http://demo-api.geekfun.website",
});
let vm = new Vue({
el:'#app',
data(){
return {
msg:'',
name:'',
age:''
}
},
methods:{
requestByGet:function () {
ax.get('/vue/01/01.aspx',{
params:{
name:this.name,
age:this.age,
}
}).then((response)=>this.msg = response.data);
},
requestByPost(){
let data = new FormData();
data.append('name',this.name);
data.append('age',this.age);
ax.post('/vue/get-vs-post.aspx',data)
.then((response)=>this.msg = response.data);
},
requestByPostJson(){
ax.post('/vue/get-vs-post.aspx',{
name:this.name,
age:this.age,
}).then((response)=>this.msg = response.data);
}
},
});
</script>
</body>
</html>
vue-前端第11章ajax-demo06.html
原创
©著作权归作者所有:来自51CTO博客作者虾米大王的原创作品,请联系作者获取转载授权,否则将追究法律责任
提问和评论都可以,用心的回复会被更多人看到
评论
发布评论
相关文章
-
vue-前端第11章ajax-demo03.html
【代码】vue-前端第11章ajax-demo03.html。
vue.js html ios ajax -
vue-前端第11章ajax-demo02.html
【代码】vue-前端第11章ajax-demo02.html。
javascript vue.js 前端 html ios -
vue-前端第11章ajax-demo04.html
【代码】vue-前端第11章ajax-demo04.html。
vue.js html ios ajax -
vue-前端第11章ajax-demo10.html
【代码】vue-前端第11章ajax-demo10.html。
javascript 前端 html ios css -
vue-前端第11章ajax-demo09.html
【代码】vue-前端第11章ajax-demo09.html。
vue.js ios html ajax -
vue-前端第11章ajax-demo08.html
【代码】vue-前端第11章ajax-demo08.html。
vue.js javascript 前端 ios html -
vue-前端第11章ajax-demo07.html
【代码】vue-前端第11章ajax-demo07.html。
vue.js javascript 前端 html ios -
vue-前端第11章ajax-demo01.html
【代码】vue-前端第11章ajax-demo01.html。
javascript vue.js 前端 xml html -
vue-前端第11章ajax-demo05.html
【代码】vue-前端第11章ajax-demo05.html。
javascript 前端 html ios ajax -
vue-前端第2章instance06.html
【代码】vue-前端第2章instance06.html。
vue.js javascript 前端 html ci -
vue-前端第7章v-if06.html
【代码】vue-前端第7章v-if06.html。
vue.js javascript 前端 html Vue -
vue-前端第9章component06.html
【代码】vue-前端第9章component06.html。
vue.js html Vue -
vue-前端第8章demoTwo06.html
【代码】vue-前端第8章demoTwo06.html。
vue.js sed html css -
vue-前端第12章transition06.html
【代码】vue-前端第12章transition06.html。
vue.js ide html css -
vue-前端第3章watch06.html
【代码】vue-前端第3章watch06.html。
vue.js javascript 前端 html Math -
vue-前端第6章form06.html
【代码】vue-前端第6章form06.html。
vue.js javascript 前端 html 复选框 -
vue-前端第5章event06.html
【代码】vue-前端第5章event06.html。
javascript vue.js 前端 html css