當前位置：首頁 > 前端技术 > vue >内容正文

vue

第四章生命周期函数--35 vue-resource发起get、post、jsonp请求

發布時間：2023/12/2 vue 28 豆豆

生活随笔收集整理的這篇文章主要介紹了第四章生命周期函数--35 vue-resource发起get、post、jsonp请求小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

?vue-resource 官網 https://github.com/pagekit/vue-resource

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 <title>Document</title> 8  9 <script src=" https://cdn.jsdelivr.net/npm/vue"></script> 10  11  12  13 <script src="./lib/vue-resource-1.5.1.js"></script> 14 </head> 15 16 <body> 17 <div id="app"> 18 <input type="button" value="get請求" @click="getInfo"> 19 <input type="button" value="post請求" @click="postInfo"> 20 <input type="button" value="jsonp請求" @click="jsonpInfo"> 21 </div> 22 23 24 <script> 25 //創建 Vue 實例，得到 ViewModel 26 var vm = new Vue({ 27 el:'#app', 28 data:{ 29 msg:'' 30 }, 31 methods:{ 32 getInfo(){//發起get請求 33 //當發起get請求之后，通過then來設置成功的回調函數 34 this.$http.get('http://vue.studyit.io/api/getlunbo').then(function(result){ 35 //通過result body 拿到服務器返回的成功的數據 36 // console.log(result) 37 }) 38 }, 39 postInfo(){//發起post請求 40 //手動發起的Post請求，默認沒有表單格式，所以，有的服務器處理了 41 //通過post方法的第三個參數，{emulateJSON:true}設置提交的內容類型為普通表單數據格式 42 this.$http.post('http://vue.studyit.io/api/post',{},{emulateJSON:true}).then(result=>{ 43 console.log(result.body) 44 }) 45 }, 46 47 jsonpInfo(){//發起JSONP請求 48 //箭頭哈數默認就是個匿名函數 49 this.$http.jsonp('http://vue.studyit.io/api/jsonp').then(result =>{ 50 console.log(result.body) 51 }) 52 } 53 } 54 55 }); 56 </script> 57 </body> 58 </html>

請求不成功，控制臺輸出：

已攔截跨源請求：同源策略禁止讀取位于 http://vue.studyit.io/api/getlunbo 的遠程資源。（原因：CORS 頭缺少 'Access-Control-Allow-Origin'）。

未解決

轉載于:https://www.cnblogs.com/songsongblue/p/10993845.html

總結

以上是生活随笔為你收集整理的第四章生命周期函数--35 vue-resource发起get、post、jsonp请求的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

vue

第四章 生命周期函数--35 vue-resource发起get、post、jsonp请求

總結

第四章生命周期函数--35 vue-resource发起get、post、jsonp请求