通过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 安装之后采用按需引入 ...
随机推荐
- 视频播放测试地址（MP4、M3U8 格式）
最近在开发视频播放相关的业务功能,开发测试时,需要涉及到 MP4.M3U8 等视频格式. 我每次找测试视频地址时,都要找很久,现在把我在网上收集到的 MP4.M3U8 格式视频地址放在这里,希望帮助到 ...
- 开发指导—利用CSS动画实现HarmonyOS动效（一）
注:本文内容分享转载自HarmonyOS Developer官网文档 一. CSS语法参考 CSS是描述HML页面结构的样式语言.所有组件均存在系统默认样式,也可在页面CSS样式文件中对组件.页面自 ...
- HarmonyOS元服务开发实践：桌面卡片字典
本文转载分享自华为开发者论坛<HarmonyOS元服务开发实践:桌面卡片字典>,作者:蛟龙腾飞 一.项目说明 1.DEMO创意为卡片字典. 2.不同卡片显示不同内容:微卡.小卡.中卡 ...
- HUAWEI AppGallery Connect全新升级，支持HarmonyOS生态全生命周期服务！
原文:https://mp.weixin.qq.com/s/7aNIplUBdm_D1yyiMrQdAw,点击链接查看更多技术内容. HUAWEI AppGallery Connect全新升 ...
- k8s 深入篇———— 一些容器操作的原理[三]
前言 简单介绍一下一些容器的操作原理. 正文 docker exec 是怎么做到进入容器里的呢. 比如说: 这里有一个容器,我们可以exec 进去: docker exec -it b265 /bin ...
- mysql 必知必会整理—sql 正则表达[五]
前言 简单整理一下sql 正则表达式. 正文 正则表达式是用来匹配文本的特殊的串(字符集合).如果你想从一个文本文件中提取电话号码,可以使用正则表达式.如果你需要查找名字中间有数字的所有文件,可以使用 ...
- Pytorch Dataset入门
Dataset入门 Pytorch Dataset code:torch/utils/data/dataset.py#L17 Pytorch Dataset tutorial: tutorials ...
- 搞定了 6 种分布式ID，分库分表哪个适合做主键？
大家好,我是小富- 本文是<ShardingSphere5.x分库分表原理与实战>系列的第七篇,目前系列的前几篇制作成了PDF,需要的可以在文末获取下载方式,持续更新中.今天咱们继续一起来 ...
- 推荐一波微软家的浏览器：EDGE
前段时间英雄联盟(LOL)队伍 EDG 夺冠成为热门事件,上了各大热搜,即使大家不玩英雄联盟,相信也多多少少有听说相关信息吧! 今天我们的主角并不是 EDG,而是微软的新版浏览器 EDGE !!! 微 ...
- 剑指offer51(Java)-数组中的逆序对（困难）
题目: 在数组中的两个数字,如果前面一个数字大于后面的数字,则这两个数字组成一个逆序对.输入一个数组,求出这个数组中的逆序对的总数. 示例1: 输入: [7,5,6,4] 输出: 5 限制: 0 &l ...