请陛下批阅
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../../vue/vue-v2.6.11.js"></script>
<!-- 引入vue-resource -->
<script src="https://cdn.bootcss.com/vue-resource/1.5.0/vue-resource.js"></script>
<!--<script src="https://unpkg.com/axios/dist/axios.min.js"></script>-->
</head>
<body>
<div id="app">
<button @click="getInfo">get请求</button>
<button @click="postInfo">post请求</button>
<button @click="jsonpInfo">jsonp请求</button>
</div>
</body>
<script>
// 全局
// Vue.http.get('/someUrl', [config]).then(successCallback, errorCallback);
// Vue.http.post('/someUrl', [body], [config]).then(successCallback, errorCallback);
var vm = new Vue({
el: '#app',
data: {
},
methods: {
// 学习地址
// ==== https://github.com/pagekit/vue-resource/blob/develop/docs/http.md ==
getInfo () {
// get(url,[config])
// get().then(successCallback, errorCallback)
this.$http.get('http://vue.studyit.io/api/getlunbo')
.then(response => {
console.log(response.data);
})
},
postInfo () {
// post(url, [body], [config])
// 手动发起的post请求,默认没有表单格式,导致有的服务器处理不了
// 将第三个参数对象中的emulateJSON设置为true即可
this.$http.post('http://vue.studyit.io/api/post',{},{emulateJSON: true})
.then(res => {
console.log(res.body);
}, error => {
console.log(error);
});
},
jsonpInfo () {
// jsonp(url,[body])
this.$http.jsonp('http://vue.studyit.io/api/jsonp')
.then(res => {
console.log(res.body);
});
}
}
});
</script>
</html>
