详解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 相关文章推荐
js中判断文本框是否为空的两种方法
Jul 31 Javascript
怎样在JavaScript里写一个swing把数据插入数据库
Dec 10 Javascript
使用jQuery和PHP实现类似360功能开关效果
Feb 12 Javascript
浅析jQuery Ajax请求参数和返回数据的处理
Feb 24 Javascript
jQuery实现产品对比功能附源码下载
Aug 09 Javascript
JS函数多个参数默认值指定方法分析
Nov 28 Javascript
vuejs指令详解
Feb 07 Javascript
JS原型与原型链的深入理解
Feb 15 Javascript
JavaScript动态加载重复绑定问题
Apr 01 Javascript
vue+element的表格实现批量删除功能示例代码
Aug 17 Javascript
详解小程序循环require之坑
Mar 08 Javascript
jQuery实现简单评论区功能
Oct 26 jQuery
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
使用 MySQL Date/Time 类型
2008/03/26 PHP
PHP通过内置函数memory_get_usage()获取内存使用情况
2014/11/20 PHP
Symfony生成二维码的方法
2016/02/04 PHP
Laravel的throttle中间件失效问题解决方法
2016/10/09 PHP
php解压缩zip和rar压缩包文件的方法
2019/07/10 PHP
精通Javascript系列之数值计算
2011/06/07 Javascript
读jQuery之三(构建选择器)
2011/06/11 Javascript
Ext.get() 和 Ext.query()组合使用实现最灵活的取元素方式
2011/09/26 Javascript
Android中资源文件(非代码部分)的使用概览
2012/12/18 Javascript
js获取时间(本周、本季度、本月..)
2013/11/22 Javascript
JS逆序遍历实现代码
2014/12/02 Javascript
node中socket.io的事件使用详解
2014/12/15 Javascript
js时间戳转为日期格式的方法
2015/12/28 Javascript
基于javascript实现动态显示当前系统时间
2016/01/28 Javascript
网页瀑布流布局jQuery实现代码
2016/10/21 Javascript
js遍历获取表格内数据的方法(必看)
2017/04/06 Javascript
在vue2.0中引用element-ui组件库的方法
2018/06/21 Javascript
详解微信小程序的不同函数调用的几种方法
2019/05/08 Javascript
简单了解JavaScript arguement原理及作用
2020/05/28 Javascript
ant-design表单处理和常用方法及自定义验证操作
2020/10/27 Javascript
python实现红包裂变算法
2016/02/16 Python
详解python中的json和字典dict
2018/06/22 Python
Python守护进程实现过程详解
2020/02/10 Python
Python创建自己的加密货币的示例
2021/03/01 Python
input file上传文件样式支持html5的浏览器解决方案
2012/11/14 HTML / CSS
HTML5 Web Database 数据库的SQL语句的使用方法
2012/12/09 HTML / CSS
全球知名旅游社区巴西站点:TripAdvisor巴西
2016/07/21 全球购物
世界上最大的在线学习和教学市场:Udemy
2017/11/08 全球购物
十一酒店活动方案
2014/02/20 职场文书
舞蹈专业大学生职业规划范文
2014/03/12 职场文书
学雷锋活动总结报告
2014/06/26 职场文书
售房协议书范本2014
2014/10/23 职场文书
一篇文章带你学习Mybatis-Plus(新手入门)
2021/08/02 Java/Android
Python实现Excel文件的合并(以新冠疫情数据为例)
2022/03/20 Python
Anaconda安装pytorch和paddle的方法步骤
2022/04/03 Python
Python尝试实现蒙特卡罗模拟期权定价
2022/04/21 Python