vue教程1-08 交互 get、post、jsonp
vue教程1-08 交互 get、post、jsonp
一、如果vue想做交互，引入: vue-resouce
二、get方式
1、get获取一个普通文本数据:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
</style>
<script src="vue.js"></script>
<script src="vue-resource.js"></script>
<script>
window.onload=function(){
new Vue({
el:'body',
data:{ },
methods:{
get:function(){
this.$http.get('a.txt').then(function(res){
alert(res.status);//成功
alert(res.data);
},function(res){
alert(res.status);//失败返回
alert(res.data);
});
}
}
});
};
</script>
</head>
<body>
<input type="button" value="按钮" @click="get()">
</body>
</html>
2、get给服务发送数据:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
</style>
<script src="vue.js"></script>
<script src="vue-resource.js"></script>
<script>
window.onload=function(){
new Vue({
el:'body',
data:{ },
methods:{
get:function(){
this.$http.get('get.php',{
a:1,
b:2
}).then(function(res){
alert(res.data);
},function(res){
alert(res.status);
});
}
}
});
};
</script>
</head>
<body>
<input type="button" value="按钮" @click="get()">
</body>
</html>
二、post方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
</style>
<script src="vue.js"></script>
<script src="vue-resource.js"></script>
<script>
window.onload=function(){
new Vue({
el:'body',
data:{ },
methods:{
get:function(){
this.$http.post('post.php',{
a:1,
b:20
},{
emulateJSON:true
}).then(function(res){
alert(res.data);
},function(res){
alert(res.status);
});
}
}
});
};
</script>
</head>
<body>
<input type="button" value="按钮" @click="get()">
</body>
</html>
四、jsonp方式
获取百度接口
查看响应数据
jsonp请求百度接口
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
</style>
<script src="vue.js"></script>
<script src="vue-resource.js"></script>
<script>
window.onload=function(){
new Vue({
el:'body',
data:{ },
methods:{
get:function(){
this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{
wd:'a'
},{
jsonp:'cb'//回调函数名称
}).then(function(res){
alert(res.data.s);
},function(res){
alert(res.status);
});
}
}
});
};
</script>
</head>
<body>
<input type="button" value="按钮" @click="get()">
</body>
</html>
jsonp请求360接口
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style> </style>
<script src="vue.js"></script>
<script src="vue-resource.js"></script>
<script>
window.onload=function(){
new Vue({
el:'body',
data:{ },
methods:{
get:function(){
this.$http.jsonp('https://sug.so.360.cn/suggest',{
word:'a'
}).then(function(res){
alert(res.data.s);
},function(res){
alert(res.status);
});
}
}
});
};
</script>
</head>
<body>
<input type="button" value="按钮" @click="get()">
</body>
</html>
vue教程1-08 交互 get、post、jsonp的更多相关文章
- vue教程1-09 交互 vue实现百度下拉列表
vue教程1-09 交互 vue实现百度下拉列表 <!DOCTYPE html> <html lang="en"> <head> <met ...
- vue教程3-05 vue组件数据传递、父子组件数据获取，slot,router路由
vue教程3-05 vue组件数据传递 一.vue默认情况下,子组件也没法访问父组件数据 <!DOCTYPE html> <html lang="en"> ...
- 【全网最全的博客美化系列教程】08.自定义地址栏Logo
全网最全的博客美化系列教程相关文章目录 [全网最全的博客美化系列教程]01.添加Github项目链接 [全网最全的博客美化系列教程]02.添加QQ交谈链接 [全网最全的博客美化系列教程]03.给博客添 ...
- vue教程3-04 vue.js vue-devtools 调试工具的下载安装和使用
vue教程3-04 vue.js vue-devtools vue调试工具的安装和使用 一.vue-devtools 下载与安装 1.需要 fan qiang 2.打开谷歌浏览器设置--->扩展 ...
- vue教程3-03 vue组件，定义全局、局部组件，配合模板，动态组件
vue教程3-03 vue组件,定义全局.局部组件,配合模板,动态组件 一.定义一个组件 定义一个组件: 1. 全局组件 var Aaa=Vue.extend({ template:'<h3&g ...
- vue教程3-02 vue动画
vue教程3-02 vue动画 以下代码,已经用包管理器下载好vue,animate <!DOCTYPE html> <html lang="en"> &l ...
- vue教程3-01 路由、组件、bower包管理器使用
vue教程3-01 路由.组件.包管理器 以下操作前提是 已经安装好node.js npm bower-> (前端)包管理器 下载: npm install bower -g 验证: bower ...
- vue教程2-08 自定义键盘信息、监听数据变化vm.$watch
vue教程2-08 自定义键盘信息 @keydown.up @keydown.enter @keydown.a/b/c.... 自定义键盘信息: Vue.directive('on').keyCode ...
- vue教程2-07 自定义指令
vue教程2-07 自定义指令 自定义指令: 一.属性: Vue.directive(指令名称,function(参数){ this.el -> 原生DOM元素 }); <div v-re ...
随机推荐
- 证明LDU分解的唯一性
首先上(下)三角矩阵乘以上(下)三角矩阵结果还是上(下)三角矩阵, 另外我们考虑相乘后的对角元素可发现,对角原始是原来2矩阵对应对角元素的乘积. 另外对角线都是1的上(下)三角矩阵必定可以只是用行运算 ...
- Livelock
Unlike deadlock, livelocked packets continue to move through the network, but never reach their dest ...
- Oracle 导出错误 EXP-00000~EXP-00107
EXP-00000: Export terminated unsuccessfully Cause: Export encountered an Oracle error. Action: Look ...
- Jpa 报错 ：HTTP Status 400 - Required String parameter 'xx' is not present
一.问题描述 使用Springboot JPA 做分页查询,报错Required String parameter 'xx' is not present,后端未接受到请求 二.解决方案: 使用的请求 ...
- SpringBoot2.0.2 不使用parent作为maven单继承方式操作 : org.springframework.boot : spring-boot-dependencies : 2.0.2.RELEASE
1.pom配置方式 <?xml version="1.0" encoding="UTF-8"?> <project xmlns="h ...
- 整合Spring+Struts2+Mybatis加spring单元测试等
前言 自己是在CentOS7的IntelliJ IDEA里开发的,里面中文输入法有问题经常用不了,所以这里用了很多chinglish,希望不要介意: 一:pom依赖 <?xml version= ...
- shell实现linux回收站的功能
shell实现linux回收站的功能 下载: https://gitee.com/LoongWang/shellrecycling/repository/archive/master.zip 代码: ...
- （转）Memcache内存分配策略
转自:http://hi.baidu.com/software_one/item/0a0a6712dc7a319899ce33e0 一.Memcache内存分配机制 关于这个机制网上有很多解释的,我个 ...
- Properties类、序列化流与反序列化流、打印流、commons-IO
Properties类 特点: 1.Hashtable的子类,map集合中的方法都可以用: 2.该集合没有泛型,键值都是字符串: 3.是一个可以持久化的属性集,键值可以存到集合中,也可存到持久化的设备 ...
- C#.NET WebApi返回各种类型(图片/json数据/字符串)，.net图片转二进制流或byte
using System.IO; /// <summary> /// WebApi返回图片 /// </summary> public HttpResponseMessage ...