<!DOCTYPE html> <html> <head> <title>vue-resource</title> <meta charset="utf-8"> </head> <body> <div id="app"> <input type="button" value="get請求" @cli... ...
<!DOCTYPE html> <html> <head> <title>vue-resource</title> <meta charset="utf-8"> </head> <body> <div id="app"> <input type="button" value="get請求" @click="getInfo"> <input type="button" value="post請求" @click="postInfo"> </div> </body> <!-- 基於vue-resource實現get post請求 也可利用axios第三方包實現--> <script src="https://cdn.staticfile.org/vue/2.6.10/vue.js"></script> <script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.js"></script> <script> // vue-promise是基於vue的,所以引入CDN庫時需要註意順序，應先引入vue let vm = new Vue({ el: "#app", data:{ }, methods:{//vue-resource發送請求是基於promise的 getInfo(){ this.$http.get('https://www.easy-mock.com/mock/5d537a1cf651bc6ff265fb77/example/result/cart.json') .then(res=>{ console.log(res); }) }, postInfo(){ this.$http.post('https://www.easy-mock.com/mock/5d537a1cf651bc6ff265fb77/example/upload',{},{ emulateJSON:true//設置這個參數相當於application/x-www-form-urlencoded，由於手動提交請求沒有預設表單格式，需要設置發送的數據格式 }) .then(res=>{ console.log(res.body); }) }, } }); </script> </html>
