7.Vue之vue-resource(ajax,jsonp)
程序员文章站
2022-06-06 21:28:56
...
介绍
在vue中利用它可以向api发出ajax请求来操作数据
正文
$http 属性上的三个方法 api的文档 / vueresource的下载地址
1.get
请求 this.$http.get(url)
响应 .then(function(res){}) 中的res就是响应报文对象
2. post
他与get和jsonp请求不同的是，第二个参数是一个请求报文对象,写法 {key:value}
第三个参数一定要带上{emulateJSON:true} ,作用是：{emulateJSON:true} 的本质是在请求报文头上增加了 Content-Type:application/x-www-form-urlencode,只有加入了这个头，在服务器中才可以获取到第二个参数对象中的属性值
3. jsonp
jsonp原理是什么: jsonp已经不是一个ajax请求了，采取的是浏览器的同源策略来实现跨域的，在请求的时候会在url后带上callback=生成的 函数名称一起提交给服务器，在服务器中利用callback传入的值当做一个方法来将要响应回去的数据当做参数传入
如何判断一个api是否支持jsonp请求？ 只需要查看响应报文体中的数据是类似于 XXXX('数据') 这种格式就表示支持jsonp
请求的特点 : 1、是一个同源请求，反映在调试器上 script类型 2、请求url后面一定是有callback参数
响应 .then(function(res){}) 中的res就是响应报文对象
<body>
<div id="app">
<button @click="getdata">jsonp的ajax请求</button>
<div>{{ res }}</div>
</div>
<script>
new Vue({
el:'#app',
data:{
res:''
},
methods:{
getdata:function(){
//发出jsonp的请求
//定义一个url：这个url所对应的处理是支持jsonp格式的响应的
var url = 'http://vuecms.ittun.com/api/jsonp' ;
this.$http.jsonp(url).then(function(response){
var body = response.body;--{"message":"jsonp请求ok"}
var obj = JSON.parse(body); -----------obj是对象
this.res = obj.message;---------------jsonp请求ok
});
}
}
});
</script>
</body>
</html>
<script>
//定义一个 v-focus的属性自定义指令
Vue.directive('focus',function(){
this.el.focus(); //实现文本框的自动获取焦点
});
//定义一个带有参数的自定义指令
Vue.directive('color',{
params:['colorName'],
bind:function(){
//1.0 获取到colorname的值
var cname = this.params.colorName;
//2.0 获取到el以后给其赋予一个样式
this.el.style.color = cname;
}
});
new Vue({
el:'#app',
//在当前data和methods创建完成以后的钩子函数中触发ajax请求即可
created:function(){
this.getlist();
},
filters:{
datefmt:function(input,fmtstr,str){
var date = new Date(input);
var year = date.getFullYear();
var m = date.getMonth() + 1;
var d = date.getDate();
var h = date.getHours();
var mi = date.getMinutes();
var se = date.getSeconds();
if(fmtstr =='yyyy-mm-dd')
{
//输出： yyyy-mm-dd
return year+'-'+m +'-'+d;
}else if(fmtstr =='hh:mm:ss'){
return h+':'+mi +':'+se;
}
}
},
data:{
list:[
],
productid:0,
productname:'',
searchValue:'' //代表搜索文本框中的内容,通过v-model就能够自动同步到视图中的数据
},
methods:{
//1.0 删除
del:function(id){
//向http://vuecms.ittun.com/api/delproduct/:id发送ajax 的get请求
//1.0 定义url
var url = 'http://vuecms.ittun.com/api/delproduct/'+id;
//2.0 发出请求
this.$http.get(url).then(function(res){
alert(res.body.message);
});
//3.0 刷新页面
this.getlist();
},
del2:function(index){
this.list.splice(index,1);
},
// 2.0 添加
addProduct:function(e){
//通过ajax的post请求来增加数据
//1.0 确定url
var url = 'http://vuecms.ittun.com/api/addproduct'
//2.0 post(url,请求报文体的数据,{emulateJSON:true}).then()
this.$http.post(url,{name:this.productname},{emulateJSON:true}).then(function(res){
// alert(res.body.message);
});
//3.0 重新获取列表数据
this.getlist();
},
//3.0 从服务器获取到品牌数据
getlist:function(){
this.$http.get('http://vuecms.ittun.com/api/getprodlist')
.then(function(res){
if(res.body.status!==0){
alert(res.body.message);
return;
}
//正常处理
this.list = res.body.message;
});
}
}
});
</script>
上一篇： Vue的一些知识要点
下一篇： 7.Vue 样式绑定