1、vue-resouce实现ajax请求

  vue1中主要用vue-resouce实现ajax请求,

 2.1 引用vue-resouce

  引入axios,直接在index.html文件中引入;

  

  或者在main.js文件中引入vue-resouce.js,并use  vue-resouce;

  

 2.1 使用vue-resouce

  三种ajax请求的方式

 

2、axios实现ajax请求

 2.1 引用axios

  vue2.0版本已不推荐使用vue-resouce发送ajax请求,推荐使用axios发送请求;

  一:直接在index中引入vue.js和axios.js文件,

     <script src="js/vue.min.js"></script>

    <script src="js/axios.min.js"></script>

  或者在main.js文件中导入axios,import axios from ‘axios’,将axios设置在vue中的原型中Vue.prototype.axios = axios;

 2.2 使用axios

  在组件中需要发送ajax请求的地方(后一种方法引入的axios改为this.axios):

  axios.type(url, params).then(function(res){

    成功回调

  }).catch(function(res){

    失败回调

  });

  或者:

  axios({

    method: type,

    url: '',

    data: {}

  }).then(function(res){

    成功回调

  }).catch(function(res){

    失败回调

  });

  axios不支持跨域请求,如果要进行跨域请求,那么使用vue-resouce获取jquery发送ajax请求。

  注: axios是一个基于Promise的HTTP请求;关于Promise示例:

  

vue实现ajax请求(vue-resource和axios)的更多相关文章

  1. 从零开始学 Web 之 Vue.js(四)Vue的Ajax请求和跨域

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  2. Vue处理ajax请求

    Ajax请求 1>解决跨域问题 1.1前端解决.只需要在vue.config.js中增加devServer节点增加代理: const path = require("path" ...

  3. vue 发送ajax请求

    一. 简介 1.vue本身不支持发送AJAX请求,需要使用vue-resource(vue1.0版本).axios(vue2.0版本)等插件实现 2.axios是一个基于Promise的HTTP请求客 ...

  4. vue发送ajax请求

    一.vue-resource 1.简介 一款vue插件,用于处理ajax请求,vue1.x时广泛应用,现不被维护. 2.使用流程 step1:安装 [命令行输入] npm install vue-re ...

  5. vue中ajax请求发送

    示例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8& ...

  6. vue的ajax请求之axios

    axios.get(this.apiUrl+'good/info',{params:{'goodsid':'sp441153'}}) .then(function(response){ console ...

  7. Vue(七)发送Ajax请求

    发送AJAX请求 1. 简介 vue本身不支持发送AJAX请求,需要使用vue-resource.axios等插件实现 axios是一个基于Promise的HTTP请求客户端,用来发送请求,也是vue ...

  8. Vue的Ajax(vue-resource/axios)

    一 简介 1.vue本身不支持发送AJAX请求,需要使用vue-resource(vue1.0版本).axios(vue2.0版本)等插件实现 2.axios是一个基于Promise的HTTP请求客户 ...

  9. vue实现ajax滚动下拉加载,同时具有loading效果

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

随机推荐

  1. webpack打包html里的img图片

    对待css里的图片, 因为已经通过引入css文件到js,打包了,可以正常通过module.rules.test检测到,然后正常打包. 但是对于html里的图片, 这个需要安装一个插件html-with ...

  2. QT 5.12安装

    QT 5.12为最新的LTS版本,将通过该版本开始QT的学习 1.软件下载 QT5.12下载地址:http://download.qt.io/archive/qt/5.12/ 当前最新版本为5.12. ...

  3. Atlantis poj1151 线段树扫描线

    Atlantis poj1151 线段树扫描线 题意 题目给了n个矩形,每个矩形给了左下角和右上角的坐标,矩形可能会重叠,求的是矩形最后的面积. 题解思路 这个是我线段树扫描线的第一题,听了学长的讲解 ...

  4. 使用pdfobject.js实现在线浏览PDF

    1.pdfobject.js官网:https://pdfobject.com/ 2.在html文件中引入这个文件,以pdfobject.min.js为例 <script type="t ...

  5. mysql-介绍、下载安装以及软件基本管理

    一.mysql介绍 mysql是一个关系型数据库管理系统,它是一个基于socket编写的C/S架构的软件. 客户端软件: mysql自带:如mysql命令,mysqldump命令等. python模块 ...

  6. Nodejs 学习笔记 --- 安装与环境配置

    一.安装Node.js步骤 1.下载对应自己系统对应的 Node.js 版本,地址:https://nodejs.org/zh-cn/      2.选安装目录进行安装      3.环境配置    ...

  7. Node 12 值得关注的新特性

    前言 时隔一年,Node.js 12 如约而至,正式发布第一个 Current 版本. 该版本带来了诸如: V8 更新带来好多不错的特性. HTTP 解析速度提升. 启动速度大幅提升. 更好的诊断报告 ...

  8. org.hibernate.hql.ast.QuerySyntaxException: tb_voteoption is not mapped [from tb_voteoption where voteID=?]

    转自:https://www.cnblogs.com/albert1017/archive/2012/08/25/2656873.html org.hibernate.hql.ast.QuerySyn ...

  9. Docker实战部署应用——Tomcat

    Tomcat 部署 拉取tomcat镜像 docker pull tomcat:8 创建tomcat容器 创建tomcat容器用于 Web应用,并且进行目录映射 docker run -id --na ...

  10. c++ sizeof的实现

    c++中的sizeof,可以通过以下宏定义实现. #include <stdio.h> #define sizeof_T(T) ((size_t)((T*)0+1)) ///求类型的大小 ...