1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>vue=resource基本使用</title> 9 <script src="./lib/jquery2.1.4.min.js"></script> 10 <script src="./lib/Vue2.5.17.js"></script> 11 <script src="https://cdn.bootcss.com/vue-resource/1.5.1/vue-resource.min.js"></script> 12 <link rel="stylesheet" href="./lib/bootstrap-3.3.7-dist/css/bootstrap.css"> 13 <!-- Github : https://github.com/pagekit/vue-resource --> 14 <!-- 除了vue-resource之外，还可以使用 axios 的第三方包实现数据的请求 --> 15 <!-- 使用方式 this.$http.get || post || jsonp --> 16 </head> 17 <style> 18 </style> 19 20 <body> 21 <div id="app"> 22 <input type="button" class="btn btn-primary" value="get请求" @click="getInfo"> 23 <input type="button" class="btn btn-primary" value="post请求" @click="postInfo"> 24 <input type="button" class="btn btn-primary" value="jsonp请求" @click="jsonInfo"> 25 </div> 26 27 <script> 28 var vm = new Vue({ 29 el: '#app', 30 data: {}, 31 methods: { 32 getInfo() {//发起get请求 33 //当发起get请求之后，通过.then来设置，接收返回结果res是个对象。 34 //接口地址已失效 35 this.$http.get("http://vue.studyit.io/api/getlunbo").then(function(res){ 36 console.log(res); 37 }) 38 }, 39 postInfo(){ 40 //第一个传的对象是数据，第二个传的对象是配置选项 41 this.$http.post("http://vue.studyit.io/api/getlunbo",{},{emulateJSON:true}).then(res => { 42 console.log(res); 43 }) 44 }, 45 jsonInfo(){//发起jsonp请求 46 this.$http.post("http://vue.studyit.io/api/jsonp").then(res => { 47 console.log(res); 48 }) 49 } 50 }, 51 }) 52 </script> 53 </body> 54 55 </html>
Vue系列之 => 通过vue-resource发起ajax请求
猜你喜欢
转载自www.cnblogs.com/winter-shadow/p/10171666.html
今日推荐
周排行