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

编码

// 引入模块 ,注意应该在App.vue中引入和声明

import VueResource from ‘vue-resource‘

// 声明使用

Vue.use(VueResource)

// 通过 vue组件对象发送 ajax 请求

this.$http.get(‘/someUrl‘).then((response)=>{

//successcallback

console.log(response.data)//返回结果数据

},(response)=>{

//errorcallback
console.log(response.statusText)//错误信息
})

(二)axios

通用的 ajax 请求库, 官方推荐,vue2.x 使用广泛

axios 的使用

在线文档   https://github.com/pagekit/vue-resource/blob/develop/docs/http.md

下载

npm install axios--save

编码

// 引入模块

import axios from ‘axios‘
// 发送 ajax 请求

axios.get(url) .then(response=>{

//successcallback

console.log(response.data)// 得到返回结果数据

}) .catch(error=>{

console.log(error.message)//错误信息

})

原文地址:https://www.cnblogs.com/adongyo/p/11260943.html

时间: 2024-07-31 17:47:29

Vue 中使用Ajax请求的相关文章

vue实战使用ajax请求后台数据(小白)

vue实战使用ajax请求后台数据(小白) 前言:前端小白入门到这个阶段,应该会知道我们所做的页面上那些数据,绝大部分都不是静态的数据,而是通过调用后台接口把数据渲染到页面上的效果.ajax可以帮助我们更好的去实现这一点,下面是详解在vue中如何使用它. vue本身它是不支持直接发送ajax请求的,需要用到axios(一个基于promise的HTTP库,可以用在浏览器和node.js中)这是Axios文档的介绍,详细可查看:https://www.kancloud.cn/yunye/axios/

React 中的 AJAX 请求:获取数据的方法

React 中的 AJAX 请求:获取数据的方法 React 只是使用 props 和 state 两处的数据进行组件渲染. 因此,想要使用来自服务端的数据,必须将数据放入组件的 props 或 state 中. 首先引入 axios. 1.`import axios from 'axios';` constructor 方法非常标准,调用 super,然后初始化 state,设置一个空的 posts 数 传入新的 posts 数组,使用 this.setState 方法更新组件状态.这会导致重

Vue--axios:vue中的ajax异步请求(发送和请求数据)

一.使用axios发送get请求 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv=&q

Vue--axios:vue中的ajax异步请求(发送和请求数据)、vue-resource异步请求和跨域

跨域原理: 一.使用axios发送get请求 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-eq

Vue2.0中的Ajax请求

Vue可以借助于vue-resource来实现Ajax请求 http请求报文 浏览器与服务器数据交互是遵循http协议的,当浏览器要访问服务器的时候,浏览器需要将相关请求数据提交给服务器. 格式分为:请求报文行.请求报文头.请求空行.请求报文体 http响应报文 当浏览器请求服务器的时候,服务器需要将数据返回给浏览器,这种数据是通过响应报文响应会回浏览器的. 格式分为:响应报文行.响应报文头.响应空行.响应报文体 HTTP协议约定 1.浏览器祥服务器发出请求的时候有get请求和post请求,浏览

vue中使用Ajax(axios)

Vue.js 2.0 版本推荐使用 axios 来完成 ajax 请求.Axios 是一个基于 Promise 的 HTTP 库,可以用在浏览器和 node.js 中. axios中文文档库:http://www.axios-js.com/zh-cn/docs/ 1.Axios简单使用 1.axios发送简单的get请求 后台: @RequestMapping("/index") @ResponseBody public Map index(HttpServletRequest req

PHP--------TP中的ajax请求

刚刚在查资料的时候看到一篇对自己今后有的文章,是关于TP框架的,将就吧它摘下来了. 以jQuery中的ajax为例: (1)引入jQuery 通过模板替换表示路径,我们可以自定义模板替换变量(在config中定义) /*自定义模板替换标签*/ 'TMPL_PARSE_STRING' =>array( '__JS__'=>'/Think_php/Public/script' ), (2)发送ajax请求(跟jquery中的ajax一样8步) (3)ajax回应(ajaxReturn()方法)  

PHP中检测ajax请求的代码例子

多数情况下,基于JavaScript 的Js框架如jquery.Mootools.Prototype等,在发出Ajax请求指令时,都会发送额外的 HTTP_X_REQUESTED_WITH 头部信息,就当是一个ajax请求,因此你可以在服务器端检测到这些Ajax请求,在PHP中的检测方法如下代码所示: <?php if(!emptyempty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUE

Java-如何挖取某个网站中的ajax请求信息

通常情况,通过网络爬虫挖取到的基本为网页静态内容,而动态ajax取数的内容是我个人暂时不知如何一次性把网站中的ajax获取 这里介绍的是某个网站中的某一个ajax多某个table刷新,期数据,并提供其他操作,如下载: 假设我们需挖取某一个网站: 例:某个网站中的那些pdf文件,并下载下来 首先:需要分析期网页组成结果:查看是通过什么方式读取处理的.这里结束ajax的方案(其它异同,ajax只是对数据进行一个一次数据的请求) 具体操作已案例介绍为主: 首先分析需要使用到的是ajax使用的请求url