在vue.js中使用Ajax发送get和post请求

在使用vue.js的时候，怎么和后台进行数据交互？你是否发现直接像jquary那样写是不可行的，因为vue.js中没有内置任何ajax请求方法。所以需要借助第三方资源库在发送ajax请求。

一、资源库的安装和使用

使用vue.js发送ajax请求，要使用vue-resource（vue1.0版本）、axios（vue2.0版本）等插件实现。

1、利用npm安装（二选一）

npm install axios 或者
npm install vue-resource

2、下载js资源文件

3、通过script src的方式进行文件的引入（二选一）

<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>//或者
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

二、语法

1、全局对象方式 Vue.http发起http请求

Vue.http.get('/someUrl', [options]).then(successCallback, errorCallback);
Vue.http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);

2、Vue 实例中使用 this.$http发起http请求

this.$http.get('/someUrl', [options]).then(successCallback, errorCallback);
this.$http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);

除了get,post外，还有其他的http请求数据方法，例如：head，delete，put，语法都是一样的。

三、在vue.js中使用get请求

1、读取数据

<div id="box">
    <input type="button" @click="get" value="点我异步获取数据(Get)">
</div>
<script type = "text/javascript">

window.onload = function(){
var vm = new Vue({
el:'#box',
data:{
},
methods:{
get:function(){
//发送get请求
this.$http.get('https://api.apiopen.top/recommendPoetry').then(function(res){
document.write(res.body.result.content); 
console.log(res)//查看api数据结构
},function(){
console.log('请求失败处理');
});
}
}
});
}
</script>

2、传递数据

语法：get(‘url地址’,{ jsonData});

第二个参数是json个是的数据。

例如：

<script type = "text/javascript">

window.onload = function(){
var vm = new Vue({
el:'#box',
data:{
},
methods:{
get:function(){
//发送get请求
this.$http.get('https://api.apiopen.top/recommendPoetry',{body:{result:{title:"用文之韵赋岩桂"},result:{authors:"张扩"}}}).then(function(res){
document.write(res.body.result.content); 
console.log(res)//查看api数据结构
},function(){
console.log('请求失败处理');
});
}
}
});
}
</script>

如上面的get方法，把需要发送的数据作为第二个参数，以json的书写方式，就可以为后台数据添加数据。

四、在vue.js中使用post请求

其实post请求和get请求的语法一样，只是两者之间自身性质和执行的方式不一样。post发送数据需要第三个参数。

语法：post(‘url地址’,{json数据},{emulateJSON:true})

emulateJSON 的作用： 如果Web服务器无法处理编码为 application/json 的请求，你可以启用 emulateJSON 选项。

例如：

window.onload = function(){
var vm = new Vue({
el:'#box',
data:{
},
methods:{
post:function(){
//发送get请求
this.$http.post('https://api.apiopen.top/recommendPoetry',{result:{title:"用文之韵赋岩桂"},result:{authors:"张扩"}},{emulateJSON:true}).then(function(res){
document.write(res.body.result.content); 
console.log(res) 
},function(){
console.log('请求失败处理');
});
}
}
});
}
</script>

五、发送跨域请求

什么是跨域请求？跨域请求是，由于浏览器同源策略，凡是发送请求url的协议、域名、端口三者之间任意一与当前页面地址不同的请求即为跨域请求。

如下：属于同域的不同文件，是允许通讯的，不存在跨域。

http://www.xx.com/a.js
http://www.xx.com/b.js

同一域名不同端口，不允许通讯，如果要通讯存在跨域。

http://www.xx.com:8080/a.js
http://www.xx.com/b.js

同一域名不同协议，不允许通讯，如果要通讯存在跨域。

http://www.xx.com:8080/a.js
https://www.xx.com/b.js

域名不同，不允许通讯，如果要通讯存在跨域。

http://www.xx.com:8080/a.js
http://www.jj.com/b.js

在本文的上面例子都是跨域发送请求，因为我使用的都是外部的API做测试使用。具体项目情况把你要请求的连接替换即可。希望可以帮到你。

本文结合实例粗略的讲解了一下vue.js中使用Ajax的get和post请求和发送数据的方法，是大家能更容易的理解和使用。具体用法和实际情况还是要大家不断去摸索，有什么好的提议和意见可以在下面留言告诉我哦。