详解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 相关文章推荐
深入理解Javascript动态方法调用与参数修改的问题
Dec 10 Javascript
分享33个jQuery与CSS3实现的绚丽鼠标悬停效果
Dec 15 Javascript
Bootstrap每天必学之日期控制
Mar 07 Javascript
详解Jquery实现ready和bind事件
Apr 14 Javascript
vue.js $refs和$emit 父子组件交互的方法
Dec 20 Javascript
详解Vue 事件修饰符capture 的使用
Dec 29 Javascript
使用webpack-dev-server处理跨域请求的方法
Apr 18 Javascript
vue elementUI table表格数据 滚动懒加载的实现方法
Apr 04 Javascript
微信小程序简单的canvas裁剪图片功能详解
Jul 12 Javascript
详解基于Vue/React项目的移动端适配方案
Aug 23 Javascript
JavaScript对象字面量和构造函数原理与用法详解
Apr 18 Javascript
JS 图片压缩原理与实现方法详解
Apr 29 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
php中将数组存到文件里的实现代码
2012/01/19 PHP
PHP实现搜索相似图片
2015/09/22 PHP
SyntaxHighlighter代码加色使用方法
2008/09/07 Javascript
jquery 插件 web2.0分格的分页脚本,可用于ajax无刷新分页
2008/12/25 Javascript
javascript 通用简单的table选项卡实现
2010/05/07 Javascript
Js 时间函数getYear()的使用问题探讨
2013/04/01 Javascript
今天是星期几的4种JS代码写法
2013/09/17 Javascript
文本框(input)获取焦点(onfocus)时样式改变的示例代码
2014/01/10 Javascript
js实现div的切换特效上一个下一个
2014/02/11 Javascript
js实现创建删除html元素小结
2015/09/30 Javascript
JavaScript判断是否是微信浏览器
2016/06/13 Javascript
再谈javascript注入 黑客必备!
2016/09/14 Javascript
微信小程序实现动态改变view标签宽度和高度的方法【附demo源码下载】
2017/12/05 Javascript
[原创]jQuery实现合并/追加数组并去除重复项的方法
2018/04/11 jQuery
JS实现常见的查找、排序、去重算法示例
2018/05/21 Javascript
Vue 菜单栏点击切换单个class(高亮)的方法
2018/08/22 Javascript
JavaScript继承的特性与实践应用深入详解
2018/12/30 Javascript
JS实现的合并两个有序链表算法示例
2019/02/25 Javascript
微信小程序npm引入vant-weapp的踩坑记录
2019/08/01 Javascript
vue组件 keep-alive 和 transition 使用详解
2019/10/11 Javascript
[00:27]DOTA2荣耀之路2:Patience from zhou!
2018/05/24 DOTA
python获得文件创建时间和修改时间的方法
2015/06/30 Python
分享一下Python 开发者节省时间的10个方法
2015/10/02 Python
django请求返回不同的类型图片json,xml,html的实例
2018/05/22 Python
使用Python机器学习降低静态日志噪声
2018/09/29 Python
Python用Try语句捕获异常的实例方法
2019/06/26 Python
python中有关时间日期格式转换问题
2019/12/25 Python
Python读写csv文件流程及异常解决
2020/10/20 Python
HTML5中的websocket实现直播功能
2018/05/21 HTML / CSS
Smallable英国家庭概念店:设计师童装及家居装饰
2017/07/05 全球购物
PHP开发工程师面试问题集锦
2012/11/01 面试题
写给女朋友的道歉信
2014/01/12 职场文书
大学毕业生自我评价
2015/03/02 职场文书
2015年英语教师工作总结
2015/05/20 职场文书
学校运动会感想
2015/08/10 职场文书
解决Go gorm踩过的坑
2021/04/30 Golang