当前位置: 首页 > 编程笔记 >

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

印成天
2023-03-14
本文向大家介绍vue基础之使用get、post、jsonp实现交互功能示例,包括了vue基础之使用get、post、jsonp实现交互功能示例的使用技巧和注意事项,需要的朋友参考一下

本文实例讲述了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技术,在这里我也让我的页面有一种不需要手动刷新就能获取到数据。但是发现用前面的方法并不能获取到我想要的效果。无奈前几天电脑换系统,把之前的源码丢了(前面