Vue框架axios请求（类似于ajax请求）
Posted 不苦不累, 人
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue框架axios请求（类似于ajax请求）相关的知识，希望对你有一定的参考价值。
Vue框架axios get请求（类似于ajax请求）
首先介绍下，这个axios请求最明显的地方，通过这个请求进行提交的时候页面不会刷新
<!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请求将数据存放在请求体中
这样用户的数据就会很安全。
<!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>
以上是关于Vue框架axios请求（类似于ajax请求）的主要内容，如果未能解决你的问题，请参考以下文章