首页 > 移动平台 > 详细

Vue框架axios请求(类似于ajax请求)

时间:2017-11-16 16:42:57      阅读:532      评论:0      收藏:0      [点我收藏+]

Vue框架axios get请求(类似于ajax请求)

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

<!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请求将数据存放在请求体中

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

<!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>

  

Vue框架axios请求(类似于ajax请求)

原文:http://www.cnblogs.com/guobaoyuan/p/7844828.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!