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 相关文章推荐
Jquery Ajax 学习实例2 向页面发出请求 返回JSon格式数据
Mar 15 Javascript
javascript字符串替换及字符串分割示例代码
Dec 12 Javascript
js获取及判断键盘按键的方法
Dec 01 Javascript
jQuery实现的给图片点赞+1动画效果(附在线演示及demo源码下载)
Dec 31 Javascript
Js的Array数组对象详解
Feb 22 Javascript
javascript判断回文数详解及实现代码
Feb 03 Javascript
ECMAScript6--解构
Mar 30 Javascript
详解JavaScript中操作符和表达式
Sep 12 Javascript
vue与原生app的对接交互的方法(混合开发)
Nov 28 Javascript
echarts大屏字体自适应的方法步骤
Jul 12 Javascript
webpack5 联邦模块介绍详解
Jul 08 Javascript
vue-video-player 断点续播的实现
Feb 01 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判断文件上传类型及过滤不安全数据的方法
2014/12/17 PHP
弹出模态框modal的实现方法及实例
2017/09/19 PHP
javascript中的继承实例代码
2011/04/27 Javascript
node.js中的fs.statSync方法使用说明
2014/12/16 Javascript
js日期范围初始化得到前一个月日期的方法
2015/05/05 Javascript
jQuery实现滚动鼠标放大缩小图片的方法(附demo源码下载)
2016/03/05 Javascript
JavaScript动态生成二维码图片
2016/04/20 Javascript
js实现漫天星星效果
2017/01/19 Javascript
jQuery实现分页功能(含ajax请求、后台数据、附完整demo)
2017/04/03 jQuery
JS加密插件CryptoJS实现的DES加密示例
2018/08/16 Javascript
jquery获取img的src值实例介绍
2019/01/16 jQuery
axios+Vue实现上传文件显示进度功能
2019/04/14 Javascript
webpack中的模式(mode)使用详解
2020/02/20 Javascript
JS sort方法基于数组对象属性值排序
2020/07/10 Javascript
让Vue响应Map或Set的变化操作
2020/11/11 Javascript
Python编程实现的简单Web服务器示例
2017/06/22 Python
python-opencv在有噪音的情况下提取图像的轮廓实例
2017/08/30 Python
python for循环输入一个矩阵的实例
2018/11/14 Python
python3中pip3安装出错,找不到SSL的解决方式
2019/12/12 Python
python-web根据元素属性进行定位的方法
2019/12/13 Python
Python统计时间内的并发数代码实例
2019/12/28 Python
python判断两个序列的成员是否一样的实例代码
2020/03/01 Python
python之语音识别speech模块
2020/09/09 Python
Python根据URL地址下载文件并保存至对应目录的实现
2020/11/15 Python
Pyside2中嵌入Matplotlib的绘图的实现
2021/02/22 Python
德国骆驼商店:ActiveFashionWorld
2017/11/18 全球购物
Coltorti Boutique官网:来自意大利的设计师品牌买手店
2018/11/09 全球购物
ASICS印度官方网站:日本专业运动品牌
2020/06/20 全球购物
如何在Oracle中查看各个表、表空间占用空间的大小
2015/10/31 面试题
公司薪酬管理制度
2014/01/31 职场文书
网吧七夕活动策划方案
2014/08/31 职场文书
后备干部推荐材料
2014/12/24 职场文书
营业员岗位职责范本
2015/04/14 职场文书
校园之声广播稿
2015/08/18 职场文书
幼儿园家长心得体会
2016/01/21 职场文书
python 自动化偷懒的四个实用操作
2021/04/11 Python