<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
</head>
<body>
<div id="app">
<input type="button" value="get请求" @click="getInfo">
<input type="button" value="post请求" @click="postInfo">
<input type="button" value="JSONP请求" @click="jsonpInfo">
</div>
</body>
<script>
var vm=new Vue({
el:'#app',
data:{},
methods:{
getInfo(){//发起get请求
//当发起get请求之后，通过.then来设置成功的回调函数
this.$http.get('resource/test.txt').then(function (res) {
//通过res.body拿到服务器返回的成功的数据
console.log(res.body);
});
},
postInfo(){//发起post请求 application/x-www-form-urlencoded
//手动发起的post请求，默认没有表单格式，所以有的服务器处理不了
//解决办法：通过post方法的第三个参数，设置提交的内容类型为普通表单数据格式
this.$http.post('resource/test.txt',{},{emulateJSON:true}).then(res=>{
console.log(res.body);
})
},
jsonpInfo(){//发起jsonp请求
// this.$http.jsonp('XXX').then(res=>{
// console.log(res.body);
// })
}
}
})
</script>
</html>
