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>

  

上一篇:linux 如何查看防火墙是否开启


下一篇:centos7开启3306端口,liunx查看防火墙是否开启