淨網集中行動取得階段成果:整治飯圈、防止未成年人沉迷遊戲、打擊網路動漫違法
阿新 • • 發佈:2021-09-07
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); });