vue基础之使用get、post、jsonp实现交互功能示例


Posted in Javascript onMarch 12, 2019

本文实例讲述了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方式

获取百度接口

vue基础之使用get、post、jsonp实现交互功能示例

查看响应数据

vue基础之使用get、post、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.3water.com/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家vue.js程序设计有所帮助。

Javascript 相关文章推荐
表单内同名元素的控制
Nov 22 Javascript
javascript tips提示框组件实现代码
Nov 19 Javascript
利用javascript打开模态对话框(示例代码)
Jan 11 Javascript
JQuery 使用attr方法实现下拉列表选中
Oct 13 Javascript
jQuery获取某天的农历日期并判断是否除夕或新年的方法
Mar 01 Javascript
js绘制购物车抛物线动画
Nov 18 Javascript
JS多物体实现缓冲运动效果示例
Dec 20 Javascript
jQuery Collapse1.1.0折叠插件简单使用
Aug 28 jQuery
vue路由导航守卫和请求拦截以及基于node的token认证的方法
Apr 07 Javascript
详解VUE调用本地json的使用方法
May 15 Javascript
微信小程序使用自定义组件导航实现当前页面高亮
Jan 02 Javascript
js实现简单扫雷
Nov 27 Javascript
深入理解Node内建模块和对象
Mar 12 #Javascript
vue基础之模板和过滤器用法实例分析
Mar 12 #Javascript
mpvue开发音频类小程序踩坑和建议详解
Mar 12 #Javascript
React中this丢失的四种解决方法
Mar 12 #Javascript
使用koa2创建web项目的方法步骤
Mar 12 #Javascript
如何为你的JS项目添加智能提示与类型检查详解
Mar 12 #Javascript
Vue项目引发的「过滤器」使用教程
Mar 12 #Javascript
You might like
php array_slice函数的使用以及参数详解
2008/08/30 PHP
解析PHP中如何将数组变量写入文件
2013/06/06 PHP
简单的php缓存类分享     php缓存机制
2014/01/22 PHP
两级联动select刷新后其值保持不变的实现方法
2014/01/27 PHP
基于ThinkPHP+uploadify+upload+PHPExcel 无刷新导入数据
2015/09/23 PHP
PHP中strcmp()和strcasecmp()函数字符串比较用法分析
2016/01/07 PHP
PHP基于mssql扩展远程连接MSSQL的简单实现方法
2016/10/08 PHP
javascript 隐藏/显示指定的区域附HTML元素【legend】用法
2010/03/05 Javascript
使用 Node.js 做 Function Test实现方法
2013/10/25 Javascript
在线一元二次方程计算器实例(方程计算器在线计算)
2013/12/22 Javascript
js 判断js函数、变量是否存在的简单示例代码
2014/03/04 Javascript
利用js制作html table分页示例(js实现分页)
2014/04/25 Javascript
javascript制作坦克大战全纪录(2)
2014/11/27 Javascript
JQuery异步获取返回值中文乱码的解决方法
2015/01/29 Javascript
JS基于cookie实现来宾统计记录访客信息的方法
2015/08/04 Javascript
node.js连接mongoDB数据库 快速搭建自己的web服务
2016/04/17 Javascript
JS如何判断json是否为空
2016/07/06 Javascript
jQuery实现ajax的叠加和停止(终止ajax请求)
2016/08/08 Javascript
标准的js无缝滚动效果
2016/08/30 Javascript
Bootstrap源码解读导航(6)
2016/12/23 Javascript
JavaScript数组操作详解
2017/02/04 Javascript
MUI 实现侧滑菜单及其主体部分上下滑动的方法
2018/01/25 Javascript
使用webpack构建应用的方法步骤
2019/03/04 Javascript
原生JS实现萤火虫效果
2020/03/07 Javascript
在Python的Flask框架中实现全文搜索功能
2015/04/20 Python
轻松实现python搭建微信公众平台
2016/02/16 Python
使用Python计算玩彩票赢钱概率
2019/06/26 Python
python实现最大子序和(分治+动态规划)
2019/07/05 Python
用python3 urllib破解有道翻译反爬虫机制详解
2019/08/14 Python
Python 在OpenCV里实现仿射变换—坐标变换效果
2019/08/30 Python
重写子类方法时,抛出异常的书写注意事项
2015/10/17 面试题
新学期校长寄语
2014/01/18 职场文书
倡议书的写法
2014/08/30 职场文书
无子女夫妻离婚协议书(4篇)
2014/10/20 职场文书
大学生个人学习总结
2015/02/15 职场文书
python如何利用traceback获取详细的异常信息
2021/06/05 Python