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中call()与apply()区别
Jan 22 Javascript
jquery Ajax 全局调用封装实例详解
Jan 16 Javascript
JS常用倒计时代码实例总结
Feb 07 Javascript
jQuery中 bind的用法简单介绍
Feb 13 Javascript
Vue.js父与子组件之间传参示例
Feb 28 Javascript
微信小程序 如何引入外部字体库iconfont的图标
Jan 31 Javascript
Node.js readline 逐行读取、写入文件内容的示例
Mar 01 Javascript
webpack4 CSS Tree Shaking的使用
Sep 03 Javascript
详解VUE单页应用骨架屏方案
Jan 17 Javascript
ES6的异步操作之promise用法和async函数的具体使用
Dec 06 Javascript
浅谈React中组件逻辑复用的那些事儿
May 21 Javascript
你不知道的 TypeScript 高级类型(小结)
Aug 28 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代码
2012/09/14 PHP
typecho插件编写教程(五):核心代码
2015/05/28 PHP
jQuery Ajax请求状态管理器打包
2012/05/03 Javascript
动态获取复选框checkbox选中个数的jquery代码
2013/06/25 Javascript
Javascript四舍五入Math.round()与Math.pow()使用介绍
2013/12/27 Javascript
javascript为按钮注册回车事件(设置默认按钮)的方法
2015/05/09 Javascript
javascript实现网页背景烟花效果的方法
2015/08/06 Javascript
javacript获取当前屏幕大小
2016/06/04 Javascript
fullpage.js全屏滚动插件使用实例
2016/09/06 Javascript
canvas滤镜效果实现代码
2017/02/06 Javascript
Vue.extend构造器的详解
2017/07/17 Javascript
Angular.js初始化之ng-app的自动绑定与手动绑定详解
2017/07/31 Javascript
nodejs读取并去重excel文件
2018/04/22 NodeJs
小程序红包雨的实现示例
2019/02/19 Javascript
JavaScript数组类型Array相关的属性与方法详解
2020/09/08 Javascript
解决idea开发遇到javascript动态添加html元素时中文乱码的问题
2020/09/29 Javascript
Python 使用requests模块发送GET和POST请求的实现代码
2016/09/21 Python
django 常用orm操作详解
2017/09/13 Python
influx+grafana自定义python采集数据和一些坑的总结
2018/09/17 Python
python批量下载网站马拉松照片的完整步骤
2018/12/05 Python
使用Python实现企业微信的自动打卡功能
2019/04/30 Python
python+webdriver自动化环境搭建步骤详解
2019/06/03 Python
python滑块验证码的破解实现
2019/11/10 Python
Python数据存储之 h5py详解
2019/12/26 Python
python实现人像动漫化的示例代码
2020/05/17 Python
pycharm远程连接vagrant虚拟机中mariadb数据库
2020/06/05 Python
英国最大的自有市场,比亚马逊便宜:Flubit
2019/03/19 全球购物
法国购买二手电子产品网站:Asgoodasnew
2020/03/27 全球购物
毕业生个人求职信范例分享
2013/12/17 职场文书
保护环境建议书
2014/03/12 职场文书
2014医学院领导干部四风对照检查材料思想汇报
2014/09/16 职场文书
教育实践活动对照检查材料
2014/09/23 职场文书
县委党的群众路线教育实践活动工作情况报告
2014/10/25 职场文书
二手车交易协议书标准版
2014/11/16 职场文书
七夕情人节问候语
2015/11/11 职场文书
运动会主持人开幕词
2016/03/04 职场文书