Vue框架axios请求（相似于ajax请求）

时间 2019-11-13

标签 vue 框架 axios 请求似于 ajax 栏目 Ajax 繁體版

原文原文链接

Vue框架axios get请求（相似于ajax请求）

首先介绍下，这个axios请求最明显的地方，经过这个请求进行提交的时候页面不会刷新html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
    <script src="axios.js"></script>
</head>
<body>
<div id="myapp">
    <input type="button" v-on:click="showlist" value="点我">
    <ul>
        <li v-for="item in stulist">
            代码：{{ item.cityCode}}
            城市：{{ item.cityName}}
        </li>
    </ul>
</div>
</body>
<script>
    new Vue({
        el:'#myapp',
        data:{
            stulist:[]
        },
        methods:{
            showlist:function () {
                url="./hotcity.json";    这是一个自定义的json数据文件
                var self = this;
                axios.get(url)
                    .then(function (response) {
                        self.stulist = response.data.data.hotCity;
                        console.log(response)
                    .catch(function (err) {

                      })
                 })

            }
        }
    })
</script>
</html>

Vue框架axios post请求（相似于ajax请求）

这个查看数据使用get请求，可是添加数据的时候若是使用get请求的话，须要添加的数据就会暴露在url中。因此使用axios中的post请求将数据存放在请求体中vue

这样用户的数据就会很安全。ios

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
    <script src="axios.js"></script>
</head>
<body>
    <div id="myapp">
        <input type="text" value="username" v-model="uname">
        <input type="text" value="password" v-model="passw">
        <input type="button" value="提交" v-on:click="login">
    </div>
    <script>
        new Vue({
            el:'#myapp',
            data: {
                uname:'',
                passw:''
            },
            methods:{
                login:function () {
                    alert(222);
                    url = "hotcity.json";
                    axios.post(url,{
                        name:this.uname,
                        password:this.passw
                    },{
                        "headers":{"Content-Type":"application/x-www-form-urlencoded"}

                    }).then(function (response) {
                        console.log(response)
                        if (response.code == 1){
                            window.location.href = "http://www.baidu.com"
                        }
                    }).catch(function (error) {
                        
                    })
                }
            }
        })

    </script>
</body>
</html>