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

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请求）

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

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

最新文章

热门文章