本文实例讲述了vue基础之使用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>
感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。
希望本文所述对大家vue.js程序设计有所帮助。
在React的实践中, 将小的可复用的组件组合成功能更复杂的组件是一种推荐的实践. 我们怎么保证组件的复用性? 我们需要保证组件是纯的UI组件, 传入同样的props总会渲染出相同的组件.(木偶组件) 复用意味着什么? 在组件内部没有与外部的数据交互(这应该在Redux中完成). 如果有需要从API获取的数据, 请使用redux-thunk. redux-thunk和redux容器是相互隔离的,
本文向大家介绍基于Vue实现拖拽功能,包括了基于Vue实现拖拽功能的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了Vue实现拖拽功能的具体代码,供大家参考,具体内容如下 效果图: HTML代码: JS代码: 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。
基础功能 百度移动统计基于增长黑客模型,结合将用户角色及使用场景的差异,将平台的业务架构梳理划分为包含:分析、开发、营销、用户管理、探索和设置六大模块。 其中“分析”模块是最主要的基础功能模块,包含: 应用概况 定制分析(特色功能) 用户分析 使用行为(包含:事件分析、页面分析) 渠道分析 留存分析 漏斗分析 “开发”模块主要适用于研发人员,用于接入测试设备,监控产品崩溃详情。具体包含: 错误分析
本文向大家介绍JS跨域交互(jQuery+php)之jsonp使用心得,包括了JS跨域交互(jQuery+php)之jsonp使用心得的使用技巧和注意事项,需要的朋友参考一下 什么是jsonp? 说到jsonp,你可能最先想到JSON;它还真和JSON有关系; JSONP(JSON with Padding)是JSON的一种“使用模式”,可用于解决主流浏览器的跨域数据访问的问题。由于同源策略,一般
本文向大家介绍vue之数据交互实例代码,包括了vue之数据交互实例代码的使用技巧和注意事项,需要的朋友参考一下 vue中的交互(ajax,jsonp) vue中也存在像ajax和jsonp的数据交互,实现向服务器获取数据,但是他本身框架当中没有这样的方法,需要一个新的小东西叫vue-resouce.js 地址:https://github.com/pagekit/vue-resource/blob
本文向大家介绍jquery中用jsonp实现搜索框功能,包括了jquery中用jsonp实现搜索框功能的使用技巧和注意事项,需要的朋友参考一下 前面的话: 在上周本来想发一篇模仿必应搜索的界面。但是在准备写文章之前突然想到前面学习了ajax技术,在这里我也让我的页面有一种不需要手动刷新就能获取到数据。但是发现用前面的方法并不能获取到我想要的效果。无奈前几天电脑换系统,把之前的源码丢了(前面