在Vue中使用vue-resource和Axios发送ajax请求

什么是Ajax

Ajax即Asynchronous JavaScript and XML(异步JavaScript和XML)的缩写
Ajax能够在不重新加载整个页面的情况下与服务器交换数据并更新部分网页

一、使用vue-resource发起ajax请求

Vue要实现异步加载需要使用vue-resource库

引入vue-resource：

<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js">script>

需要注意的是 vue-resource 依赖于Vue 因此引入的顺序要放在Vue的后面

vue-resource往Vue上面挂载了一个$http
因此 可通过this.$http来发起请求 例如this.$http.get()或this.$http.post() 等
通过.then()获取返回的数据

this.$http.get()/post().then(成功回调函数[必填],失败回调函数[可填])

全部请求：

• get(url, [config])
• head(url, [config])
• delete(url, [config])
• jsonp(url, [config])
• post(url, [body], [config])
• put(url, [body], [config])
• patch(url, [body], [config])

使用例子：

<div id="app">
	<input type="button" value="get" @click="getInfo">
div>

<script>
    var vm=new Vue({
       el:'#app',
       data:{},
       methods:{
           getInfo()
           {
               // 发起get请求
               // 通过.then()设置请求成功后的回调函数
               this.$http.get("http://localhost/testGet").then(function(result)
               {
                   console.log(result);
               })
           }
       }
    });
script>

请求返回的数据：

---

get请求

语法：get(url, [config])

getInfo()
{
    // 发起get请求
    // 通过.then()设置请求成功后的回调函数
    this.$http.get("http://localhost/testGet").then(function(result)
    {
        // 通过result.body拿到服务器返回的数据
        console.log(result.body);
    })
}

请求返回的数据：

---

post请求

语法：post(url, [body], [config])
手动发起的post请求的请求头中默认是没有表单格式的 从而导致无法处理编码为application/json的请求
此时 可通过post方法的第三个参数(config) 设置emulateJSON为true 设置提交的内容类型为普通表单的数据格式

postInfo()
{
    // 携带参数发起post请求
    this.$http.post("http://localhost/testPost",{},{emulateJSON:true}).then(result=>{
        console.log(result.body);
    })
}

请求返回的数据：

携带参数：

postArgsInfo()
{
    // 发起post请求
    this.$http.post("http://localhost/testPostArgs",{
        page:1,
        keyword:"学习"
    },{
    	// 设置请求头
    	// emulateJSON:true
    }).then(result=>{
        console.log(result.body);
    })
}

请求返回的数据：

---

二、使用Axios发起ajax请求

在Vue中 除了使用vue-resource之外 还可使用axios实现实现数据的请求
Vue.js2.0版本推荐使用axios来完成ajax请求

Axios是一个基于Promise的HTTP库 可用于浏览器和node.js中

引入Axios：

<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>

可直接使用别名来发起请求：

• 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]])

使用例子：

<div id="app">
	<input type="button" value="get" @click="getInfo">
div>

<script>
    var vm=new Vue({
       el:'#app',
       data:{},
       methods:{
           getInfo()
           {
               // 发起get请求
               // 通过.then()设置请求成功后的回调函数
               axios.get("http://localhost/testGet")
               .then(function(result){
                   // 通过result.data拿到服务器返回的数据
                   console.log(result);
               })
               .catch(function(err)
               {
                   console.log(err); // 请求失败处理
               })
           }
       }
    });
script>

请求返回的数据：

---

get请求

axios的请求语法其实和vue-resource很相似
语法：axios.get(url[, config])

getInfo()
{
    // 发起get请求
    // 通过.then()设置请求成功后的回调函数
    axios.get("http://localhost/testGet")
    .then(function(result){
        // 通过result.data拿到服务器返回的数据
        console.log(result.data);
    })
    .catch(function(err)
    {
        console.log(err); // 请求失败处理
    })
}

请求返回的数据：

---

post请求

语法：axios.post(url[, data[, config]])

postInfo()
{
    // 发起post请求
    axios.post("http://localhost/testPost")
    .then(result=>{
        // 通过result.data拿到服务器返回的数据
        console.log(result.data);
    })
    .catch(function(err)
    {
        console.log(err); // 请求失败处理
    })
}

请求返回的数据：

携带参数：

注：headers: { "Content-Type": "application/x-www-form-urlencoded" }可设置请求头
请求数据若为JSON数据 则需在post()的第三个参数中设置该属性 否则会报错

postArgsInfo()
{
    // 携带参数发起post请求
    axios.post("http://localhost/testPostArgs",{
        page:1,
        keyword:"学习"
    },{
        // 设置请求头
        // headers: { "Content-Type": "application/x-www-form-urlencoded" }
    }).then(result=>{
        // 通过result.data拿到服务器返回的数据
        console.log(result.data);
    }).catch(function(err)
    {
        console.log(err); // 请求失败处理
    })
}

请求返回的数据：

---

另：

笔者的测试接口用的是Java
在获取post传的参数的时候有个坑 在后台取不到传来的数据

解决方法：

• 服务端：
  在用vue-resource发起请求的时候 参数加上emulateJSON:true
  在用Axios发起请求的时候 参数加上headers: { "Content-Type": "application/x-www-form-urlencoded" }

• 客户端：
  或是在绑定入参的时候加上@RequestBody注解即可
  例：

public Map<String,Object> postAPI(@RequestBody Map data)
{
	...
}

特此记录一下

---