Vue系列之 => 通過vue-resource發起ajax請求
阿新 • • 發佈：2018-12-25
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>