一、Vue.js Ajax(axios)
Vue.js 2.0 版本推荐使用 axios 来完成 ajax 请求。
Axios 是一个基于 Promise 的 HTTP 库,可以用在浏览器和 node.js 中。
Github开源地址: https://github.com/axios/axios
安装方法
- 使用 cdn:
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
或:
<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
- 使用 npm:
$ npm install axios
二、GET 方法
//通过给定的ID来发送请求
axios.get('/user?ID=12345')
.then(function(response){
console.log(response);
})
.catch(function(err){
console.log(err);
});
//以上请求也可以通过这种方式来发送
axios.get('/user',{
params:{
ID:12345
}
})
.then(function(response){
console.log(response);
})
.catch(function(err){
console.log(err);
});
三、post 请求
axios.post('/user',{
firstName:'Fred',
lastName:'Flintstone'
})
.then(function(res){
console.log(res);
})
.catch(function(err){
console.log(err);
});
四、实例
axios.request(config)
axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])
注意:在使用别名方法时, url、method、data 这些属性都不必在配置中指定 。
(1)首先导入 js
(2)需求就是将数据库查询信息显示到页面上,同时可以编辑修改用户信息,并重新展示
(3)编写 user.js
new Vue({
el: "#app",
data: {
message:"test",
user: {id: "", username: "", password: "", age: "", sex: "", email: ""},
userList: []
},
methods: {
findAll: function () {
//这里必须这样重新定义 this,不然无法区分是 vue 的this 还是 axios 的this
var _this = this;
axios.get("user/findAll.do").then(function (response) {
_this.userList = response.data;
console.log(_this.userList);
}).catch(function (err) {
console.log(err);
});
},
findById: function (userId) {
var _this = this;
axios.get("user/findById.do", {
params: {
id: userId
}
}).then(function (response) {
_this.user = response.data;
//显示模式组件
$("#myModal").modal("show");
}).catch(function (err) {
console.log(err);
});
},
update: function (user) {
var _this = this;
axios.post("user/updateUser.do", _this.user).then(function (response) {
_this.findAll();
}).catch(function (err) {
console.log(err);
});
}
},
//当我们页面加载的时候触发请求,查询所有
created() {
this.findAll();
}
});
(4)对应的 Controller
@Controller
@RequestMapping("/user")
@ResponseBody
public class UserController {
@Autowired
private IUserservice userService;
/**
* 查询所有用户信息
* @return
*/
@RequestMapping("/findAll.do")
public List<User> findAll() {
System.out.println("findAll 进来了。。。");
return userService.findAll();
}
/**
* 根据 id 查询用户信息
* @param userId
* @return
*/
@RequestMapping("/findById.do")
public User findById(@RequestParam( name = "id") Integer userId) {
User user = userService.findById(userId);
return user;
}
/**
* 更新用户
*/
@RequestMapping("/updateUser.do")
public void updateUser(@RequestBody User user) {
System.out.println("updateUser 进来了。。。");
userService.updateUser(user);
}
}
后续会把示例代码上传到 GitHub 上,需要的可以留言提醒我放链接