axios请求的实现

最新推荐文章于 2024-05-14 13:58:13 发布

代序春秋

最新推荐文章于 2024-05-14 13:58:13 发布

阅读量2.3k

点赞数

分类专栏： vue.js

本文链接：https://blog.csdn.net/geek64581/article/details/102504935

版权

vue.js 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

文章目录

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

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

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>