Vue 中使用Ajax请求
Vue 项目中常用的 2 个 ajax 库
(一)vue-resource
vue 插件, 非官方库,vue1.x 使用广泛
vue-resource 的使用
在线文档 https://github.com/pagekit/vue-resource/blob/develop/docs/http.md
下载
npm install vue-resource --save
编码
// 引入模块 ,注意应该在入口文件main.js中引入和声明
import VueResource from 'vue-resource'
// 声明使用
Vue.use(VueResource) //内部会给vm对象和组件对象添加一个属性:$http
// 通过 vue组件对象发送 ajax 请求(发送get请求)
this.$http.get('/someUrl?foo=bar').then(
response=>{//successcallback
console.log(response.data)//返回结果数据
},
response=>{//errorcallback
console.log(response.statusText)//错误信息
})
// 通过 vue组件对象发送 ajax 请求(发送post请求)
this.$http.post('/someUrl', {foo: 'bar'}).then(
response=>{//successcallback
console.log(response.data)//返回结果数据
},
response=>{//errorcallback
console.log(response.statusText)//错误信息
})
(二)axios
通用的 ajax 请求库, 官方推荐,vue2.x 使用广泛
axios 的使用
在线文档 https://github.com/axios/axios/blob/master/README.md
下载
npm install axios --save
编码
// 引入模块,无需声明,在组件中引入
import axios from 'axios'
// 发送 ajax 请求(发送get请求)
axios.get('/someUrl?foo=bar') .then(
response=>{//successcallback
console.log(response.data)// 得到返回结果数据
}) .catch(
error=>{
console.log(error.message)//错误信息
})
// 发送 ajax 请求(发送post请求)
axios.post('/someUrl', {foo: 'bar'}) .then(
response=>{//successcallback
console.log(response.data)// 得到返回结果数据
}) .catch(
error=>{
console.log(error.message)//错误信息
})
Vue 中使用Ajax请求的更多相关文章
- Vue中发送ajax请求——axios使用详解
axios 基于 Promise 的 HTTP 请求客户端,可同时在浏览器和 node.js 中使用 功能特性 在浏览器中发送 XMLHttpRequests 请求 在 node.js 中发送 htt ...
- vue - Vue中的ajax
只有在ajax才能找回一点点主场了,vue中的ajax一天整完,内容还行,主要是对axios的运用. 明天按理说要开始vuex了,这个从来都是只耳闻没有眼见过,明天来看看看看是个什么神奇的东西. 一. ...
- PHP--------TP中的ajax请求
PHP--------TP中的ajax请求 以jQuery中的ajax为例: (1)引入jQuery 通过模板替换表示路径,我们可以自定义模板替换变量(在config中定义) /*自定义模板替换标签* ...
- javascrpt 中的Ajax请求
回顾下javascript中的Ajax请求,写一个小例子: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN& ...
- ASP.NET Core Razor中处理Ajax请求
如何ASP.NET Core Razor中处理Ajax请求 在ASP.NET Core Razor(以下简称Razor)刚出来的时候,看了一下官方的文档,一直没怎么用过.今天闲来无事,准备用Rozor ...
- HighCharts中的Ajax请求的2D折线图
HighCharts中的Ajax请求的2D折线图 设计源码: <!DOCTYPE html> <html> <head> <meta charset=&quo ...
- 关于JQuery中的ajax请求或者post请求的回调方法中的操作执行或者变量修改没反映的问题
前段时间做一个项目,而项目中所有的请求都要用jquery 中的ajax请求或者post请求,但是开始处理一些简单操作还好,但是自己写了一些验证就出现问题了,比如表单提交的时候,要验证帐号的唯一性,所以 ...
- [Web 前端] 如何在React中做Ajax 请求?
cp from : https://segmentfault.com/a/1190000007564792 如何在React中做Ajax 请求? 首先:React本身没有独有的获取数据的方式.实际上, ...
- vue中的ajax - axios
vue中的ajax - axios axios - 简书 使用 axios 实现 ajax 方案 VUE 更好的 ajax 上传处理 axios.js vue.js 自2.0版本已经不对 vue-re ...
随机推荐
- Codeforces Round #600 (Div. 2) - B. Silly Mistake(模拟)
题意:有一个公司,每天有员工进出,$a[i]>0$时表示$a[i]$这个员工进入公司,$a[i]<0$时表示$-a[i]$这个员工出公司,公司对进出办公室有一些严格的规定 员工每天最多只能 ...
- Nginx禁止使用ip访问,只允许使用域名访问
Nginx虚拟主机配置,vhosts下面有很多域名的配置: [root@external-lb01 vhosts]# pwd/data/nginx/conf/vhosts [root@external ...
- string类的具体实现
bigThree,注意拷贝构造函数的写法. #ifndef __MYSTRING__ #define __MYSTRING__ class String { public: String(); Str ...
- php封装的mysqli类完整实例
本文实例讲述了php封装的mysqli类.分享给大家供大家参考,具体如下:类: <?php header('content-type:text/html;charset=utf-8'); /* ...
- springBoot整合mybatis-plus关闭自动转换小驼峰命名规则
增加配置信息 mybatis-plus: configuration: map-underscore-to-camel-case: false
- Servlet 学习(三)
HTTP 请求的构成 1.HTTP 请求行: 请求方式,比如 GET .POST 等 本次请求的URI ,比如 /hello 协议和版本号 2. HTTP 请求报头: (头部/首部/请求头) 请求头和 ...
- idea没有import project解决办法
参考:https://blog.csdn.net/zengxiaosen/article/details/52807540
- IELTS Writing Task 2: 'music' essay
IELTS Writing Task 2: 'music' essay Here's my band 9 sample answer for the question below. Some peop ...
- Java垃圾回收与内存
好久没看关于java的书了, 最近, 看了James Gosling的<<Java程序设计语言>>, 做了一些读书笔记. 这部分是关于垃圾回收的. 1.垃圾回收 对象是使用ne ...
- yolo系列目标检测+自标注数据集进行目标识别
1. yolov1的识别原理 参考:https://blog.csdn.net/u010712012/article/details/85116365 https://blog.csdn.net/gb ...