Vue第十三天（AJAX）
阿新 • • 發佈：2018-12-21
準備步驟如同第一天
程式碼：（測試注意事項：js中的程式碼依次開啟測試，不可全部開啟，會報錯）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../node_modules/vue/dist/vue.js"></script> <script src="../node_modules/vue-resource/dist/vue-resource.js"></script> <script src="../node_modules/vue-router/dist/vue-router.js"></script> <script src="../node_modules/axios/dist/axios.js"></script> </head> <body> <!--GET請求--> <div id="app1"> <input type="button" @click="get()" value="點選測試ajax"> </div> <br> <!--POST請求--> <div id="box"> <input type="button" @click="post()" value="點我非同步獲取資料(Post)"> </div> <br> </body> <script> /*get請求*/ var vm=new Vue({ el:'#app1', data:{ msg:'測試' }, methods:{ get:function () { // 傳送get請求 this.$http.get('沒寫後臺，無測試').then(function (res) { document.write(res.body); },function () { console.log('請求失敗') }) } } }) /*post請求*/ window.onload = function(){ var vm = new Vue({ el:'#box', data:{ msg:'Hello World!', }, methods:{ post:function(){ //傳送 post 請求 this.$http.post('沒寫後臺，無測試',{name:"菜鳥教程",url:"http://www.runoob.com"},{emulateJSON:true}).then(function(res){ document.write(res.body); },function(res){ console.log(res.status); }); } } }); } </script> </html>