• 文章目錄

  • 前言

    一、axios的安裝

    二.通過axios.get()方法獲取json數據

    2.1下面的代碼是通過axios.get()獲取json數據

    2.2顯示json數據

    總結

---

前言

今天學習了通過axios發送請求來獲取json數據，下面分享下axios獲取json數據的使用

---

一、axios的安裝

?在html中導入下面這行代碼即可下載

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

二.通過axios.get()方法獲取json數據

2.1下面的代碼是通過axios.get()獲取json數據

<script src="https://unpkg.com/axios/dist/axios.min.js"></script> <script src="../js/vue.js"></script> <script>const app = new Vue({el: '#app',data: {//定義一個變量來獲取返回的json數據list:null},methods: {getMovies:function () {//在axios回調函數內部this是window，不是vue對象//定義局部變量that代替vue對象var that=this;//get("url") url是要請求的地址axios.get("http://localhost:3205/getMovies").then(function (resp){//resp是服務器的響應，里面存有json數據//json的數據存放在resp.data中that.list=resp.data;})}},//通過這個方法可以在頁面渲染時自動的調用里邊的方法mounted:function (){this.getMovies();} })

json數據

2.2顯示json數據

list中存放著json數據，可通過下邊的代碼進行簡單的顯示

<ul><li v-for="item in list">{{item}}</li> </ul>

---

總結

? ? ? ? 通過axios可以將前端和后端鏈接起來，之前想要做一個看電影的網站，但是不知道怎么獲取json數據，但是今天學到，將學到的方法分享給你們，希望后面我能完成這個電影網站。

?

總結

以上是生活随笔為你收集整理的vue通过axios获取json数据的全部內容，希望文章能夠幫你解決所遇到的問題。

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