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 相关文章推荐
javascript URL锚点取值方法
Feb 25 Javascript
jquery中one()方法的用法实例
Jan 16 Javascript
JS实现简单的图书馆享元模式实例
Jun 30 Javascript
基于jQuery实现的双11天猫拆红包抽奖效果
Dec 01 Javascript
使用JQuery实现智能表单验证功能
Mar 08 Javascript
原生JS实现九宫格抽奖效果
Apr 01 Javascript
原生JS实现图片网格式渐显、渐隐效果
Jun 05 Javascript
JS调用安卓手机摄像头扫描二维码
Oct 16 Javascript
微信小程序复选框实现多选一功能过程解析
Feb 14 Javascript
Element InputNumber计数器的使用方法
Jul 27 Javascript
jquery+ajax实现异步上传文件显示进度条
Aug 17 jQuery
手动实现vue2.0的双向数据绑定原理详解
Feb 06 Vue.js
深入理解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输出表格的实现代码(修正版)
2010/12/29 PHP
php array_push()数组函数:将一个或多个单元压入数组的末尾(入栈)
2011/07/12 PHP
PHP采集腾讯微博的实现代码
2012/01/19 PHP
PHP处理Oracle的CLOB实例
2014/11/03 PHP
详解WordPress开发中get_header()获取头部函数的用法
2016/01/08 PHP
PHP编程文件处理类SplFileObject和SplFileInfo用法实例分析
2017/07/22 PHP
IE6下拉框图层问题探讨及解决
2014/01/03 Javascript
jquery ajax 如何向jsp提交表单数据
2015/08/23 Javascript
深入理解JS中的Function.prototype.bind()方法
2016/10/11 Javascript
Bootstrap 下拉多选框插件Bootstrap Multiselect
2017/01/22 Javascript
详解本地Node.js服务器作为api服务器的解决办法
2017/02/28 Javascript
JQuery元素快速查找与操作
2018/04/22 jQuery
jQuery实现基本淡入淡出效果的方法详解
2018/09/05 jQuery
jQuery分组选择器简单用法示例
2019/04/04 jQuery
Vue将页面导出为图片或者PDF
2020/08/17 Javascript
微信小程序 函数防抖 解决重复点击消耗性能问题实现代码
2019/09/12 Javascript
JavaScript随机数的组合问题案例分析
2020/05/16 Javascript
js+canvas实现画板功能
2020/09/13 Javascript
[01:24]DOTA2上海特锦赛OG战队抵达 专车接机入驻总统套房
2016/02/23 DOTA
[01:18:36]LGD vs VP Supermajor 败者组决赛 BO3 第一场 6.10
2018/07/04 DOTA
python基于xml parse实现解析cdatasection数据
2014/09/30 Python
用Python的Django框架编写从Google Adsense中获得报表的应用
2015/04/17 Python
Python处理文本文件中控制字符的方法
2017/02/07 Python
解决Python字典写入文件出行首行有空格的问题
2017/09/27 Python
python 2.7.13 安装配置方法图文教程
2018/09/18 Python
Python3实现汉语转换为汉语拼音
2019/07/08 Python
Python爬虫库BeautifulSoup获取对象(标签)名,属性,内容,注释
2020/01/25 Python
安全生产投入制度
2014/01/29 职场文书
优秀经理事迹材料
2014/02/01 职场文书
创业计划书如何编写
2014/02/06 职场文书
高校优秀辅导员事迹材料
2014/05/07 职场文书
道路交通事故赔偿协议书
2014/10/24 职场文书
个人简历求职信范文
2015/03/20 职场文书
人事行政助理岗位职责
2015/04/11 职场文书
oracle索引总结
2021/09/25 Oracle
vue生命周期钩子函数以及触发时机
2022/04/26 Vue.js