前言

今天学习了通过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数据,但是今天学到,将学到的方法分享给你们,希望后面我能完成这个电影网站。

 

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐