详解vue与后端数据交互(ajax):vue-resource


Posted in Javascript onMarch 16, 2017

本人对vue与后端数据交互不是很懂,搜索了很多关于vue与后端数据交互介绍,下面我来记录一下,有需要了解的朋友可参考。希望此文章对各位有所帮助。

必须引入一个库:vue-resource

1.获取普通文本数据

比如:a.txt:

welcomet to vue!!!

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <meta charset="utf-8">
  <script src="http://unpkg.com/vue/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/vue.resource/1.0.3/vue-resource.min.js"></script>
  <script type="text/javascript">
    window.onload = function(){
      var vm = new Vue({
        el:'#box',
        data:{
          msg:'Hello World!',
        },
        methods:{
          get:function(){
            //发送get请求
            this.$http.get('a.txt').then(function(res){
              alert(res.body);  
            },function(){
              console.log('请求失败处理');
            });
          }
        }
      });
    }
  </script>
</head>
<body> 
  <div id="box">
    <input type="button" @click="get()" value="按钮">
  </div>
</body>
</html>

上面代码实现了,点击按钮,就发送get请求,然后把拿到的数据alert出来。

详解vue与后端数据交互(ajax):vue-resource

2.get发送数据给后端

假设后端地址是get.PHP,代码如下:

<?php
$a = $_GET['a'];
$b = $_GET['b'];

$c = $a + $b;

die($c);
this.$http.get('get.php',{a:1,b:2}).then(function(res){
 alert(res.body);  
 },function(res){
         console.log(res.status);
        });

this.$http.get('get.php',jsonData) 第二个参数就是传到后端的数据。

3.post请求

post发送数据到后端,还需要第三个参数:{emulateJSON:true}

this.$http.post('post.php',{a:1,b:2},{emulateJSON:true}).then(function(res){
              alert(res.body);  
            },function(res){
              console.log(res.status);
            });

4.jsonp

这是360搜索jsonp的接口: https://sug.so.360.cn/suggest?callback=suggest_so&word=a

详解vue与后端数据交互(ajax):vue-resource 

我们看vue-resource如何使用jsonp

this.$http.jsonp('https://sug.so.360.cn/suggest',{word:'a'},{jsonp:'callback'}).then(function(res){
              console.log(res.data);
            },function(res){
              console.log(res.status);
            });

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
使Ext的Template可以解析二层的json数据的方法
Dec 22 Javascript
javascript KeyDown、KeyPress和KeyUp事件的区别与联系
Dec 03 Javascript
关于jQuery UI 使用心得及技巧
Oct 10 Javascript
showModalDialog在谷歌浏览器下会返回Null的解决方法
Nov 27 Javascript
详解javascript实现瀑布流列式布局
Jan 29 Javascript
javascript每日必学之封装
Feb 23 Javascript
基于jquery日历价格、库存等设置插件
Jul 05 jQuery
动态加载权限管理模块中的Vue组件
Jan 16 Javascript
解决Vue中 父子传值 数据丢失问题
Aug 27 Javascript
javascript实现弹出层效果
Dec 10 Javascript
echarts浮动显示单位的实现方法示例
Dec 04 Javascript
Javascript之datagrid查询详解
Sep 15 Javascript
js实现一键复制功能
Mar 16 #Javascript
js判断PC端与移动端跳转
Dec 24 #Javascript
jquery编写日期选择器
Mar 16 #Javascript
jquery事件与绑定事件
Mar 16 #Javascript
Angular使用$http.jsonp发送跨站请求的方法
Mar 16 #Javascript
JSON与js对象序列化实例详解
Mar 16 #Javascript
JS对象的深度克隆方法示例
Mar 16 #Javascript
You might like
西德产收音机
2021/03/01 无线电
php 获取本机外网/公网IP的代码
2010/05/09 PHP
php数组排序usort、uksort与sort函数用法
2014/11/17 PHP
基于php判断客户端类型
2016/10/14 PHP
php类自动装载、链式操作、魔术方法实现代码
2017/07/23 PHP
php array 转json及java 转换 json数据格式操作示例
2019/11/13 PHP
jQuery 遍历-nextUntil()方法以及prevUntil()方法的使用介绍
2013/04/26 Javascript
JavaScript避免代码的重复执行经验技巧分享
2014/04/17 Javascript
火狐下input焦点无法重复获取问题的解决方法
2014/06/16 Javascript
JavaScript中的包装对象介绍
2015/01/27 Javascript
jquery无法为动态生成的元素添加点击事件的解决方法(推荐)
2016/12/26 Javascript
非常优秀的JS图片轮播插件Swiper的用法
2017/01/03 Javascript
JavaScript模板引擎实现原理实例详解
2018/12/14 Javascript
使用Karma做vue组件单元测试的实现
2020/01/16 Javascript
vue-resourc发起异步请求的方法
2020/02/11 Javascript
[05:06]2017亚洲邀请赛DAC回顾片
2017/04/19 DOTA
Python深入学习之闭包
2014/08/31 Python
Python  pip安装lxml出错的问题解决办法
2017/02/10 Python
Python+PIL实现支付宝AR红包
2018/02/09 Python
Python文本统计功能之西游记用字统计操作示例
2018/05/07 Python
python读写LMDB文件的方法
2018/07/02 Python
Python函数装饰器常见使用方法实例详解
2019/03/30 Python
Django框架登录加上验证码校验实现验证功能示例
2019/05/23 Python
Python安装与基本数据类型教程详解
2019/05/29 Python
Django REST framework 视图和路由详解
2019/07/19 Python
python如何从文件读取数据及解析
2019/09/19 Python
Pytorch根据layers的name冻结训练方式
2020/01/06 Python
HTML5 transform三维立方体实现360无死角三维旋转效果
2014/08/22 HTML / CSS
LEGO玩具英国官方商店:LEGO Shop GB
2018/03/27 全球购物
类、抽象类、接口的差异
2016/06/13 面试题
毕业生机械建模求职信
2013/10/14 职场文书
三八妇女节超市活动方案
2014/08/18 职场文书
生活部的活动方案
2014/08/19 职场文书
2014财产信托协议书范本
2014/11/18 职场文书
学校食堂管理制度
2015/08/04 职场文书
SpringBoot全局异常处理方案分享
2022/05/25 Java/Android