在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>
vue-get请求-01

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请求和发送数据的方法,是大家能更容易的理解和使用。具体用法和实际情况还是要大家不断去摸索,有什么好的提议和意见可以在下面留言告诉我哦。

微信公众号
手机浏览(小程序)
0
分享到:
没有账号? 忘记密码?