详解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 相关文章推荐
jquery下异步提交表单 异步跨域提交表单
Nov 17 Javascript
jQuery插件分享之分页插件jqPagination
Jun 06 Javascript
深入分析Cookie的安全性问题
Mar 01 Javascript
一个字符串中出现次数最多的字符 统计这个次数【实现代码】
Apr 29 Javascript
Bootstrap源码解读模态弹出框(11)
Dec 28 Javascript
创建一般js对象的几种方式
Jan 19 Javascript
详解webpack es6 to es5支持配置
May 04 Javascript
JQuery 封装 Ajax 常用方法(推荐)
May 21 jQuery
JavaScript动态绑定详解
Sep 14 Javascript
JQuery实现table中tr上移下移的示例(超简单)
Jan 08 jQuery
在iFrame子页面里实现模态框的方法
Aug 17 Javascript
微信小程序实现搜索历史功能
Mar 26 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 新手入门教程
2009/08/03 PHP
PHP url 加密解密函数代码
2011/08/26 PHP
PHP 利用AJAX获取网页并输出的实现代码(Zjmainstay)
2012/08/31 PHP
js限制checkbox勾选的个数以及php获取多个checkbbox的方法深入解析
2013/07/18 PHP
老生常谈PHP面向对象之标识映射
2017/06/21 PHP
Laravel5.0+框架邮件发送功能实现方法图文与实例详解
2019/04/23 PHP
JS控件autocomplete 0.11演示及下载 1月5日已更新
2007/01/09 Javascript
JavaScript DOM学习第四章 getElementByTagNames
2010/02/19 Javascript
JS重要知识点小结
2011/11/06 Javascript
js+html5通过canvas指定开始和结束点绘制线条的方法
2015/06/05 Javascript
JS+CSS实现分类动态选择及移动功能效果代码
2015/10/19 Javascript
jquery拖拽排序简单实现方法(效果增强版)
2016/02/16 Javascript
ES6入门教程之Class和Module详解
2017/05/17 Javascript
Vue iview-admin框架二级菜单改为三级菜单的方法
2018/07/03 Javascript
vue-router的HTML5 History 模式设置
2018/09/08 Javascript
JavaScript数组方法的错误使用例子
2018/09/13 Javascript
Angular2 自定义表单验证器的实现方法
2018/12/14 Javascript
JavaScript基于数组实现的栈与队列操作示例
2018/12/22 Javascript
mpvue性能优化实战技巧(小结)
2019/04/17 Javascript
Node.js API详解之 V8模块用法实例分析
2020/06/05 Javascript
python通过线程实现定时器timer的方法
2015/03/16 Python
Python实现截屏的函数
2015/07/26 Python
Python实现计算最小编辑距离
2016/03/17 Python
python计算阶乘和的方法(1!+2!+3!+...+n!)
2019/02/01 Python
python实现列表中最大最小值输出的示例
2019/07/09 Python
python openpyxl使用方法详解
2019/07/18 Python
python super的使用方法及实例详解
2019/09/25 Python
python opencv角点检测连线功能的实现代码
2020/11/24 Python
HTML5 audio标签使用js进行播放控制实例
2015/04/24 HTML / CSS
工程管理造价应届生求职信
2013/11/13 职场文书
学前教育毕业生自荐信范文
2013/12/24 职场文书
参观监狱心得体会
2014/01/02 职场文书
医药学专业大学生职业生涯规划书论文
2014/01/21 职场文书
前厅收银主管岗位职责
2014/02/04 职场文书
技术总监管理职责范本
2014/03/06 职场文书
深入理解MySQL中MVCC与BufferPool缓存机制
2022/05/25 MySQL