1. 程式人生 > >vue 使用axios 傳送表單資料

vue 使用axios 傳送表單資料

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title></title>
</head>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script src="js/axios.min.js" type="text/javascript" charset="utf-8"></script>     //引入 vue 和axios

<body>

<form action="" id="form">

<label for="">賬號<inputv-model="login.zh"type="text" name="" id="" value="" /> </label>    //雙向繫結資料zh
<label for="">密碼<inputv-model="login.mm"type="password" name="" id="" value="" /></label>      //雙向繫結資料mm

<inputv-on:click="dj"

type="button" value="提交" />   //新增 click事件
</form>

<script type="text/javascript">
new Vue({
el: '#form',
data: {
login:{mm: '',
zh: ""}
},
methods: {
dj: function() {


console.log(this.login)     ////返回的是一個包含很多內容東西的物件 裡邊還有不想要的東西
var obj=JSON.stringify(this.login)  ////JSON.stringify()JSON.stringify() 方法用於將 JavaScript 值轉換為 JSON 字串。 為了清除不想要的東西


console.log(obj)
axios.post('/user',obj)
.then(function() {
console.log(response);
})
.catch(function(error) {
console.log(error);
});
}

}
})
</script>

</body>

</html>

--------------

總結

axios 傳送資料 的方法

get 方法

axios.get('/user?ID=12345')

  .then(function (response{     console.log(response);   })   .catch(function (error{     console.log(error);   }); post 方法 axios.post('/user'{     firstName'Fred',     lastName'Flintstone'   })   .then(function (response{     console.log(response);   })   .catch(function (error{     console.log(error);   });