详解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 16 Javascript
Javascript操作cookie的函数代码
Oct 03 Javascript
js 固定悬浮效果实现思路代码
Aug 02 Javascript
加载列表时jquery获取ul中第一个li的属性
Nov 02 Javascript
Jquery树插件zTree用法入门教程
Feb 17 Javascript
深入浅析JavaScript中prototype和proto的关系
Nov 15 Javascript
jquery 实现复选框的全选操作实例代码
Jan 24 Javascript
Node.js与Sails redis组件的使用教程
Feb 14 Javascript
vue实现动态列表点击各行换色的方法
Sep 13 Javascript
vue+echarts+datav大屏数据展示及实现中国地图省市县下钻功能
Nov 16 Javascript
Vue 的 v-model用法实例
Nov 23 Vue.js
详解uniapp的全局变量实现方式
Jan 11 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函数解决SQL injection
2006/10/09 PHP
PHP 文件上传进度条的两种实现方法的代码
2007/11/25 PHP
php伪静态验证码不显示的解决方案
2019/09/26 PHP
js模拟select下拉菜单控件的代码
2013/05/08 Javascript
基于JavaScript 下namespace 功能的简单分析
2013/07/05 Javascript
js实现拖拽效果(构造函数)
2015/12/14 Javascript
详解javascript实现瀑布流绝对式布局
2016/01/29 Javascript
基于jQuery实现的无刷新表格分页实例
2016/02/17 Javascript
使用struts2+Ajax+jquery验证用户名是否已被注册
2016/03/22 Javascript
基于jQuery实现的查看全文功能【实用】
2016/12/11 Javascript
node.js入门学习之url模块
2017/02/25 Javascript
利用imgareaselect辅助后台实现图片上传裁剪
2017/03/02 Javascript
关于foreach循环中遇到的问题小结
2017/05/08 Javascript
vue-router+vuex addRoutes实现路由动态加载及菜单动态加载
2017/09/28 Javascript
django使用channels2.x实现实时通讯
2018/11/28 Javascript
React 使用recharts实现散点地图的示例代码
2018/12/07 Javascript
layui默认选中table的CheckBox复选框方法
2019/09/19 Javascript
基于vue-cli3+typescript的tsx开发模板搭建过程分享
2020/02/28 Javascript
Vue实现指令式动态追加小球动画组件的步骤
2020/12/18 Vue.js
[06:43]2018DOTA2国际邀请赛寻真——VGJ.Thunder
2018/08/11 DOTA
[58:25]VP vs RNG 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
[01:18:31]DOTA2-DPC中国联赛定级赛 LBZS vs Magma BO3第一场 1月10日
2021/03/11 DOTA
python处理图片之PIL模块简单使用方法
2015/05/11 Python
python实现kMeans算法
2017/12/21 Python
Python实现将doc转化pdf格式文档的方法
2018/01/19 Python
Python决策树和随机森林算法实例详解
2018/01/30 Python
Python数据分析之获取双色球历史信息的方法示例
2018/02/03 Python
深入分析python中整型不会溢出问题
2018/06/18 Python
Python调用REST API接口的几种方式汇总
2020/10/19 Python
移动通信行业实习自我鉴定
2013/09/28 职场文书
初中三年学生的学习自我评价
2013/11/13 职场文书
小学优秀教师先进事迹材料
2014/12/16 职场文书
长城的导游词
2015/01/30 职场文书
国庆节到了,利用JS实现一个生成国庆风头像的小工具 详解实现过程
2021/10/05 Javascript
python中的sys模块和os模块
2022/03/20 Python