- vue-resource是vue中可以替换jquery中的ajax请求功能的库
- 除了vue-resource，还可以使用axios的第三方包实现数据的请求，vue2.0版本推荐使用axios
- 在vue包后面导入vue-resource,vue-resource依赖于vue，下载vue-resource包：https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js
- 使用get请求：
- this.$http.get(url,[options]).then(successCallback,errorCallback)
- 使用result.body获得请求成功的数据
- 使用Post请求：
- this.$http.get(url,[body],[options]).then(successCallback,errorCallback)
- 手动发起的POST请求，默认没有表单格式，所以，有的服务器处理不了，可以通过post方法的第三个参数{emulateJSON:true}设置提交的内容类型为普通表单数据格式
- 使用result.body获得请求成功的数据
- 使用JSONP请求
- this.$http.jsonp(url, [options]).then(successCallback, errorCallback)
- 使用result.body获得请求成功的数据
- JSONP的实现原理
- 由于浏览器的安全性限制，不允许AJAX访问协议不同，域名不同，端口号不同的数据接口，浏览器认为这种访问不安全
- 可以通过动态创建script标签的形式，把script标签的src属性，指向数据接口的地址，因为script标签不存在跨域限制，这种数据获取方式，称作JSONP（注意：根据JSONP的实现原理，知晓JSONP只支持GET请求）
- 具体实现过程：
1）先在客户端定义一个回调方法，预定义对数据的操作
2）再把这个回调方法的名称通过URL传参的心事，提交到服务器的数据接口
3）服务器数据接口阻止好要发送给客户端的数据，再拿着客户端传递过来的回调方法名称，拼接出一个调用这个方法的字符串，发送给客户端去解析执行
4）客户端拿到服务器返回的字符串之后，当作script脚本去解析执行，这样就能够拿到JSONP的数据了
- 代码演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue-resource演示</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
</head>
<body>
<div id="app">
<div>
<input type="button" value="get" @click="get()">
<input type="button" value="post" @click="post()">
<input type="button" value="jsonp" @click="jsonp()">
</div>
<div>
{{ content }}
</div>
</div>
<script>
//用于jsonp请求回调的函数
function jsonpCall(){
console.log("jsonp Call success")
}
var vm = new Vue({
el: "#app",
data: {
content:''
},
methods:{
get(){ //如果是静态文件直接运行，需要处理跨域问题
var url = "http://localhost:10439/say_hi"
this.$http.get(url, function(result){
this.content = result.body
},function(res){
console.log("请求失败")
})
},
post(){ //如果是静态文件直接运行，需要处理跨域问题
var url = "http://localhost:10439/say_hi_post"
var param = {data : 'test'}
this.$http.post(url, param , function(result){
this.content = result.body
},function(res){
console.log("请求失败")
})
},
jsonp(){ //前端处理跨域请求的一种方式，只有get请求
var url = "http://localhost:10439/jsonp_call"
this.$http.jsonp(url, function(result){
this.content = result.body
})
}
}
})
</script>
</body>
</html>
网友评论