1. 程式人生 > 資訊 >淨網集中行動取得階段成果:整治飯圈、防止未成年人沉迷遊戲、打擊網路動漫違法

淨網集中行動取得階段成果:整治飯圈、防止未成年人沉迷遊戲、打擊網路動漫違法

Vue.js 2.0 版本推薦使用 axios 來完成 ajax 請求。

Axios 是一個基於 Promise 的 HTTP 庫,可以用在瀏覽器和 node.js 中。

安裝方法

使用 cdn:

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>

使用 npm:

npm install axios

GET請求

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Vue 測試例項</title>
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
</head>

<body>
    <div id="app">
        {{ info }}
    
</div> <script type="text/javascript"> new Vue({ el: '#app', data() { return { info: null } }, mounted() { axios .get('https://www.runoob.com/try/ajax/json_demo.json') .then(response
=> (this.info = response)) .catch(function (error) { // 請求失敗處理 console.log(error); }); } }) </script> </body> </html>

POST請求

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Vue 測試例項</title>
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
</head>

<body>
    <div id="app">
        {{ info }}
    
</div> <script type="text/javascript"> new Vue({ el: '#app', data() { return { info: null } }, mounted() { axios .post('https://www.runoob.com/try/ajax/demo_axios_post.php') .then(response => (this.info = response)) .catch(function (error) { // 請求失敗處理 console.log(error); }); } }) </script> </body> </html>

post請求form格式

          // 編碼型別為application/x-www-form-urlencoded使用
                let form = new URLSearchParams()
                // 編碼型別為其他時使用
                // let form = new FormData()
                form.append("pageNum", 1)

                axios
                    .post('地址', form)
                    .then(response => (this.info = response))
                    .catch(function (error) { // 請求失敗處理
                        console.log(error);
                    });

post請求其他格式

             axios
                    .post('地址', {'pageNum':1})
                    .then(response => (this.info = response))
                    .catch(function (error) { // 請求失敗處理
                        console.log(error);
                    });