axios请求的实现

文章目录

      • 1. 开启服务器
      • 2. axios请求的实现(get)
      • 3. 交互请求到美女图片

vue.js没有集成 ajax 功能,要使用 ajax 功能,可以使用vue官方推荐的 axios.js 库来做ajax的交互。

  • axios 只有get 和 post 方法, 不支持jsonp. 也就是说axios框架不能够跨域请求数据,希望大家注意这一点.
  • 请求分为两种 get 和 post

1. 开启服务器

axios请求的实现_第1张图片

2. axios请求的实现(get)

  • post和get一样
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./vue.js"></script>
    <script src="./axios.min.js"></script>
    <script>
        window.onload = function () {
            vm = new Vue({
                el: '#app',
                data: {
                    msg: '',
                    list: [],
                    url: ''
                },
                methods: {
                    getData: function () {
                        var url = 'http://127.0.0.1:8000/demo/demo/'
                        _this = this

                        axios.get(url)
                            .then(function (response) {
                                console.log(response)
                                // _this.msg = response.data.msg
                                // _this.list = response.data.list
                                _this.url = response.data.url
                            })

                            .catch(function (error) {
                                console.log(error)
                            })
                    }
                },
            })
        }
    </script>
</head>

<body>
<div id="app">
    <button @click="getData">获取后端数据</button>
    <!--获取文本信息-->
    <!-- <input type="text" v-model="msg"> -->
    <!--获取字典中的列表-->
    <!-- <ul>
        <li v-for="item in list">
            {{item}}
        </li>
    </ul> -->
    <!--获取图片地址-->
    <img :src="url" alt="">
</div>

</body>

</html>

3. 交互请求到美女图片

axios请求的实现_第2张图片

你可能感兴趣的:(vue.js)