vue與後臺互動資料（axios）
阿新 • • 發佈：2019-02-11
首先需要引入axios
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>1.get方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>axios測試</title> <!--<script src="http://unpkg.com/vue/dist/vue.js"></script>--> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> <!--<script type="text/javascript" src="http://remoteserver.com/remote.js"></script>--> <script type="text/javascript"> window.onload = function(){ var vm = new Vue({ el:'#box', data:{ msg:'Hello World!', }, methods:{ test:function(){ //get請求 axios.get('check.php',{ params:{ name:'admin', age:'123' } }) .then(res=>{ console.log(res); }).catch(error=>{ console.log(error); }); } } }); } </script> </head> <body> <div id="box"> <input type="button" @click="test()" value="按鈕"> </div> </body> </html>
2.post方法
//方式一 axios.post('http://127.0.0.1:8080/VueStudy/test/getTest.action','name=admin&a=13') .then(res=>{ console.log(res); }).catch(error=>{ console.log(error); }); //方式二 axios.post('http://127.0.0.1:8080/VueStudy/test/getTest.action',{ name:'admin', age:'123', a:"gaoguozhen" },{ transformRequest:[ function(data){ let params=''; for(let index in data){ params+=index+'='+data[index]+'&'; } return params; } ] }) .then(res=>{ console.log(res); }).catch(error=>{ console.log(error); });