通过axios实现数据请求
vue.js默认没有提供ajax功能的。
所以使用vue的时候，一般都会使用axios的插件来实现ajax与后端服务器的数据交互。
注意，axios本质上就是javascript的ajax封装，所以会被同源策略限制。
下载地址：
https://unpkg.com/axios@0.18.0/dist/axios.js
https://unpkg.com/axios@0.18.0/dist/axios.min.js
axios提供发送请求的常用方法有两个：axios.get() 和 axios.post() 。
// 发送get请求
// 参数1: 必填，字符串，请求的数据接口的url地址，例如请求地址：http://www.baidu.com?id=200
// 参数2：可选，json对象，要提供给数据接口的参数
// 参数3：可选，json对象，请求头信息
axios.get('服务器的资源地址',{
params:{ // get参数
参数名:'参数值', // id: 200,
},
header:{ // 请求头 }
}).then(function (response) { // 请求成功以后的回调函数
console.log("请求成功");
console.log(response.data); // 获取服务端提供的数据 }).catch(function (error) { // 请求失败以后的回调函数[如果then里面代码有错误，也会执行这里的代码]
console.log("请求失败");
console.log(error.response); // 获取错误信息
}); // 发送post请求，参数和使用和axios.get()一样。
// 参数1: 必填，字符串，请求的数据接口的url地址
// 参数2：必填，json对象，要提供给数据接口的参数,如果没有参数，则必须使用{}
// 参数3：可选，json对象，请求头信息
axios.put('服务器的资源地址',{
username: 'xiaoming',
password: '123456'
},{
responseData:"json",
})
.then(function (response) { // 请求成功以后的回调函数
console.log(response);
})
.catch(function (error) { // 请求失败以后的回调函数
console.log(error);
}); // b'firstName=Fred&lastName=Flintstone'
1、jQuery版本的Ajax请求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-1.12.4.js"></script>
<script>
$(function(){
$("#btn").on("click",function(){
$.ajax({
// 后端程序的url地址
url: 'http://wthrcdn.etouch.cn/weather_mini',
// 也可以使用method，提交数据的方式，默认是'GET'，常用的还有'POST'
type: 'get',
dataType: 'json', // 返回的数据格式，常用的有是'json','html',"jsonp"
data:{ // 设置发送给服务器的数据，如果是get请求，也可以写在url地址的?后面
"city":'北京'
}
})
.done(function(resp) { // 请求成功以后的操作
console.log(resp);
})
.fail(function(error) { // 请求失败以后的操作
console.log(error);
});
});
})
</script>
</head>
<body>
<button id="btn">点击获取数据</button>
</body>
</html>
2、Vue版本的Ajax请求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="city">
<button @click="get_weather">点击获取天气</button> <div> <ul v-for="day in weather_content">
<li>{{day.date}} 最高温度：{{day.high}} 最低温度：{{day.date}} 类型：{{day.type}} </li>
</ul>
</div>
</div>
<script>
let vm = new Vue({
el:"#app",
data:{
city:"",
weather_content:""
},
methods:{
get_weather(){
// http://wthrcdn.etouch.cn/weather_mini?city=城市名称
axios.get("http://wthrcdn.etouch.cn/weather_mini?city="+this.city)
.then(response=>{
console.log(response);
this.weather_content = response.data.data.forecast }).catch(error=>{
console.log(error.response)
});
// 上面的参数写法,也可以是下面这种格式:
// axios.get("http://wthrcdn.etouch.cn/weather_mini",{
// // get请求的附带参数
// params:{
// "city":"广州",
// }
// }).then(response=>{
// console.log(response.data); // 获取接口数据
// }).catch(error=>{
// console.log(error.response); // 获取错误信息
// })
}
}
})
</script>
</body>
</html>
通过axios实现数据请求的更多相关文章
- vue2-通过axios实现数据请求
1.通过axios实现数据请求 vue.js默认没有提供ajax功能 所以使用vue的时候,一般都会使用axios的插件来实现ajax与后端服务器的数据交互. 注意,axios本质上就是javascr ...
- day78 通过axios实现数据请求
目录 一.axios提供http请求的两个常用方法 二.json 1.json数据的语法 2 js中提供json数据转化的方式 三 ajax 1 数据接口 2 ajax在jq和vue的不同使用 3 同 ...
- axios的数据请求方式及跨域
express 的三大功能:静态资源.路由.模板引擎 app.use(express.static('www')); 只要是创建这个静态的目录,这个 www 的静态目录里面的文件就可以被访问 数据的请 ...
- vue使用axios发送数据请求
本文章是基于vue-cli脚手架下开发 1.安装 npm install axios --s npm install vue-axios --s 2.使用.在index.js中(渲染App组件的那个j ...
- vue-cli3 配置跨域并通axios进行数据请求
在项目根目录下创建vue.config.js文件,配置信息: module.exports = { devServer: { proxy: { '/api': { target: 'http://19 ...
- 02 Vue之vue对象属性功能&axios数据请求实现
1.过滤器的声明和使用 过滤器,就是vue允许开发者自定义的文本格式化函数,可以使用在两个地方:输出内容和操作数据中. 定义过滤器的方式有两种. 1 使用Vue.filter()进行全局定义 2 在v ...
- day 74 vue 2 axios数据请求 以及组件的学习
前情提要: vue 学习二: 一: 通过axios实现数据请求 1:json数据语法 json数据对象类似于JavaScript中的对象,但是它的键对应的值里面是没有函数方法的,值可以是普通变量, ...
- React中利用axios来实现数据请求
axios是基于Promise来封装的,通常我们会用axios在数据请求这块作如下配置: 一.拦截器 有注释,不难理解,通常请求头参数不是写死的,应该是去浏览器中读的,例如,login之后返回toke ...
- axios发送post请求，如何提交表单数据？
axios发送post请求,提交表单数据的方式 默认情况下,axios将JavaScript对象序列化为JSON.要以application / x-www-form-urlencoded格式发送数据 ...
- vue axios数据请求get、post方法的使用
我们常用的有get方法以及post方法,下面简单的介绍一下这两种请求方法 vue中使用axios方法我们先安装axios这个方法 npm install --save axios 安装之后采用按需引入 ...
随机推荐
- 一、Unity调用Xcode封装方法(工程引用文件)
1.Xcode新建Static Library 工程 (我起的名字是UnityExtend 可以在接下来的图中看到) 2.打包unity ios工程 unity打包ios 打出Xcode工程 3.打开 ...
- 第十七篇：Django入门
一.模板 二.BootStrap使用 三.web框架简绍 四.Django使用 五.创建APP 六.APP各目录功能 七.静态文件处理 八.模板语言 九.请求过程
- 基于 Scriptable 从零开始美化iOS桌面（一）
今天我为大家带来新的作品,iOS17桌面组件神器(Scriptable)原创脚本,精美作品分享!喜欢的话就点关注吧!更多脚本正在路上... * script : ONE-Progress.js * v ...
- c# ManualResetEventSlim
前言 后续会把异步编程的ManualResetEventSlim 深入写完,先简单介绍一下吧. ManualResetEventSlim 有set 方法和 reset .wait.dispose方法. ...
- Xilinx USB JTAG两种JTGA-HS3和Platfrom下载器速度对比
下面测试速度,以一个V7的配置文件为例子.文件大小如下,27MB.特别是对于有点规模的项目配置文件都是很大的.总不能是点灯项目. 选择普通的下载器,Platform Cable USB.这种下载器是基 ...
- 浅谈TypeScript对业务可维护性的影响
前言 笔者认为, TypeScript是服务于业务的, 核心就是提高代码的可维护性. TypeScript是把双刃剑, 如果类型系统使用的不好, 反而会阻碍开发, 甚至最后就变成了anyScript. ...
- python性能测试，请求QPS测试
QPS = (1000ms/平均响应时间ms)*服务并行数量 #!/user/bin/env python #coding=utf-8 import requests import datetime ...
- DataFunTalk：阿里建设一站式实时数仓的经验分享
简介: 本文内容整理于阿里资深技术专家姜伟华在DataFunTalk上的演讲,为大家介绍阿里巴巴基于一站式实时数仓Hologres建设实时数仓的经验和解决方案. 导读:大数据计算正从规模化走向实时化, ...
- 阿里云张献涛：自主最强DPU神龙的秘诀
简介:读懂云计算,才能看清DPU热潮. 微信公众号搜索"弹性计算百晓生",获取更多云计算知识. 如果细数最近火爆的科技概念,DPU必然位列其中. 这是英伟达一手捧红的新造富故事, ...
- 链路分析 K.O “五大经典问题”
简介:链路分析是基于已存储的全量链路明细数据,自由组合筛选条件与聚合维度进行实时分析,可以满足不同场景的自定义诊断需求. 作者:涯海 链路追踪的 "第三种玩法" 提起链路追踪,大 ...