vue最初使用vue-resource来实现异步请求（ajax），vue 2.0开始推荐使用 axios 来代替vue-resource。
1、使用npm下载axios
npm install axios
2、引入axios.js
<script src="js/axios.js"></script>
上线时换为min.js
可以这样写：
我要评论<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!-- 引入vue.js -->
<script src="js/vue.js"></script>
<!-- 引入axios.js -->
<script src="js/axios.js"></script>
</head>
<body>
<div id="app"></div>
<script>
new vue({
el:'#app',
template:`
<div>
<button @click="login">发送</button>
</div>
`,
data(){
return{
}
},
methods:{
login:function() {
axios.post('/login', { //get|post可选，用对象{ }传递数据，如果不传递数据，可缺省{ }。get方式参数也可以拼接在url中
username: 'chy', //通常是获取表单数据，$('#xxx').val
password: 'abcd'
}).then(function (response) { //处理后台返回的数据。
console.log(response); //response是后台返回的整个响应
console.log(response.data); //.data才是后台返回的数据
}).catch(function (error) { //发生错误时的处理
console.log(error);
});
}
}
})
</script>
</body>
</html>
如果不需要后台返回数据，可以不要then。catch也不是必需的。
也可以这样写：
methods:{
login:function() {
axios({
method:'post', //请求方式
url:'/login', //后台接口
data:{ //传给后台的数据
username: 'chy',
password: 'abcde'
}
}).then(function (response) {
console.log(response); //response是后台返回的整个响应
console.log(response.data); //.data才是后台返回的数据
}).catch(function (error) { //发生错误时的处理
console.log(error);
});
}
}
这种是不跨域的，如果跨域，url要写 host|ip:port/xxx，写全。
发起异步请求时可以用resulttype指定期待返回的数据类型（text、json、stream），可以但是没必要，会自动识别返回的数据类型。
@controller
// @responsebody //@responsebody可以写在类上、方法上，写在类上时，对类中所有方法都生效
// @restcontroller //@restcontroller相当于@controller+@responsebody
public class usercontroller {
@requestmapping("/login")
@responsebody //如果要返回数据给前端，需要用@responsebody修饰方法，以json形式返回，不然会被当做视图名
public string login(@requestbody map<string,string> map) { //如果要接收ajax传来的参数，需要用一个、且只能用一个map来接收参数，并且要用@requestbody标注
string username = map.get("username"); //获取ajax传递的参数
string password = map.get("password");
system.out.println(username);
system.out.println(password);
return "ok"; //返回给前端的数据。如果不返回数据，返回值类型设置为void即可
}
}
上面的demo不涉及跨域请求，如果请求要跨域，前端、后台都要做一些其它设置。
@restcontroller //相当于@controller+@responsebody
public class usercontroller {
//返回文本|字符串
@requestmapping("/login1")
public string login1() {
return "hello";
}
//返回对象
@requestmapping("/login2")
public user login2() {
user user = new user("chy", "abcd");
return user;
}
//返回map。map和pojo类都是一回事，都是作为json对象返回
@requestmapping("/login3")
public map<string,object> login3() {
hashmap<string, object> map = new hashmap<>();
map.put("username", "chy");
map.put("age", 20);
return map;
}
//返回list，以json数组的形式返回
@requestmapping("/login4")
public list login4() {
user user1 = new user("chy1", "abcd");
user user2 = new user("chy2", "abcd");
user user3 = new user("chy3", "abcd");
arraylist<user> userlist = new arraylist<>();
userlist.add(user1);
userlist.add(user2);
userlist.add(user3);
return userlist;
}
}
.then(function (response) {
console.log(response.data); //取出返回的数据，字符串|对象|map|list
// console.log(response.data.username); //取出对象|map的某个字段的值
// console.log(response.data[0]); //取出list中的某个元素
// console.log(response.data[0].username); //取出list中的某个元素的某个字段的值
})
如果调试时，chrome控制台报错： net::err_socket_not_connected ，多刷新几次，或者清除缓存即可。
如对本文有疑问， 点击进行留言回复！！
offset、client、scroll (width,height、left,top、X,Y)
网友评论