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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。