详解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写的数字拼图小游戏代码[学习参考]
Oct 29 Javascript
JS的replace方法介绍
Oct 20 Javascript
解析js中获得父窗口链接getParent方法以及各种打开窗口的方法
Jun 19 Javascript
jquery 多行文本框(textarea)高度变化
Jul 03 Javascript
父元素与子iframe相互获取变量和元素对象的具体实现
Oct 15 Javascript
判断文档离浏览器顶部的距离的方法
Jan 08 Javascript
jQuery+AJAX实现网页无刷新上传
Feb 22 Javascript
javascript运动详解
Jul 06 Javascript
JS加载iFrame出现空白问题的解决办法
May 13 Javascript
JS简单实现禁止访问某个页面的方法
Sep 13 Javascript
jquery获取并修改触发事件的DOM元素示例【基于target 属性】
Oct 10 jQuery
vue实现PC端分辨率适配操作
Aug 03 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学习之数组值的操作
2011/04/17 PHP
CodeIgniter框架提示Disallowed Key Characters的解决办法
2014/04/21 PHP
Zend Framework创建自己的动作助手详解
2016/03/05 PHP
详解php用curl调用接口方法,get和post两种方式
2017/01/13 PHP
PHP SPL 被遗落的宝石【SPL应用浅析】
2018/04/20 PHP
PHP实现15位身份证号转18位的方法分析
2019/10/16 PHP
用jscript启动sqlserver
2007/06/21 Javascript
jQuery.Validate 使用笔记(jQuery Validation范例 )
2010/06/25 Javascript
javascript对象的使用和属性操作示例详解
2014/03/02 Javascript
jquery 表单验证之通过 class验证表单不为空
2015/11/02 Javascript
JavaScript实现ASC转汉字及汉字转ASC的方法
2016/01/23 Javascript
基于jquery实现简单的分页控件
2016/03/17 Javascript
js阻止浏览器默认行为触发的通用方法(推荐)
2016/05/15 Javascript
jQuery插件Flexslider实现图片轮播、图文结合滑动切换效果
2020/04/16 Javascript
微信小程序 倒计时组件实现代码
2016/10/24 Javascript
bootstrap IE8 兼容性处理
2017/03/22 Javascript
vue.js加载新的内容(实例代码)
2017/06/01 Javascript
vue2 router 动态传参,多个参数的实例
2017/11/10 Javascript
简述vue中的config配置
2018/01/23 Javascript
大转盘抽奖小程序版 转盘抽奖网页版
2020/04/16 Javascript
关于AngularJS中几种Providers的区别总结
2020/05/17 Javascript
简单了解vue 插值表达式Mustache
2020/07/22 Javascript
详解Python pygame安装过程笔记
2017/06/05 Python
微信跳一跳python辅助软件思路及图像识别源码解析
2018/01/04 Python
NumPy统计函数的实现方法
2020/01/21 Python
Python Opencv中用compareHist函数进行直方图比较对比图片
2020/04/07 Python
美国护肤咨询及美容产品电商:Askderm
2017/02/24 全球购物
Java 中访问数据库的步骤?Statement 和PreparedStatement 之间的区别?
2012/06/05 面试题
三维科技面试题
2013/07/27 面试题
优秀毕业大学生推荐信
2013/11/13 职场文书
大学生两会学习心得体会
2014/03/10 职场文书
青年志愿者活动总结
2014/04/26 职场文书
运动员获奖感言
2014/08/15 职场文书
商务英语专业大学生职业生涯规划书
2014/09/14 职场文书
儿子满月酒致辞
2015/07/29 职场文书
Vue 打包后相对路径的引用问题
2022/06/05 Vue.js