一篇文章带你快速学习 VueJS Ajax

一、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 上，需要的可以留言提醒我放链接