通过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 安装之后采用按需引入 ...
随机推荐
- 直播预告丨“Hello ArkUI：初识Slider组件（JS）”周三约起
12月1日 19:00-20:30,Hello HarmonyOS系列课程的第三节Hello ArkUI:初识Slider组件(JS)线上直播,将手把手教你熟悉最新的ArkUI,使用JS语言编写一个包 ...
- ArkUI开发趣味体验，快来抽取限量HarmonyOS专属头像！
本次ArkUI开发趣味体验活动,将手把手教大家如何在IDE里实操一个ArkUI程序,通过补充缺失代码,成功运行程序开启抽奖功能,抽取个人专属头像,做HarmonyOS第一批数字藏品家! 同时本期提供的 ...
- 日志分析qsnctfwp
使用工具:http Logs Viewer 使用 http Logs Viewer 载入 access.log 按照 Status 排序 其中大量 Status 为404的日志不难推断出,这是在进行目 ...
- 报表 BI 选型的那些事
前言 报表工具是一个接近 20 年的产物了 但是,直到现在,在各种数据信息化的系统中,报表工具的作用,不仅没有褪色,反而是因为信息化需求的增大.数据的增多,以及报表工具本身迭代后越来越方便好用,使得它 ...
- mysql 必知必会整理—游标[十四]
前言 简单介绍一下游标. 正文 需要MySQL 5 MySQL 5添加了对游标的支持,因此,本章内容适用于MySQL 5及以后的版本. 有时,需要在检索出来的行中前进或后退一行或多行.这就是使用游标的 ...
- 重新整理数据结构与算法(c#)——算法套路普利姆算法[二十九]
前言 看一个题目: 这个问题就是求最小生成树,是图转换为树的一种方式. 最小生成树概念: 最小生成树简称MST. 1.n个顶点,一定有n-1条边 2.包含全部顶点. 3.图转换为最小生成树,权重之和最 ...
- docker安装mysql8.0.20并远程连接
前言 今天docker安装mysql8.0.20捯饬了半天,主要是挂载问题和连接问题,索性记录一下.网上很多千篇一律,还有很多就是过时了,那还是我自己上场吧.大家看的时候,请睁大眼睛,按步骤来. Do ...
- 基于DataWorks搭建新零售数据中台
文章作者:许日(欢伯),在2016年盒马早期的时候,转到盒马事业部作为在线数据平台的研发负责人,现任阿里云计算平台DataWorks建模引擎团队负责人. 文章简介:本篇文章向大家分享新零售企业如何基于 ...
- ICBU可控文本生成技术详解
简介: 文本生成(Text Generation)是自然语言处理(Natural Language Processing,NLP)领域的一项重要且具有挑战的任务.顾名思义,文本生成任务的目的是生成近 ...
- [FAQ] golang-migrate/migrate error: migration failed in line 0: (details: Error 1065: Query was empty)
当我们使用 migrate create 创建了迁移文件. 没有及时填写内容,此时运行 migrate 的后续命令比如 up.down 会抛出错误: error: migration failed i ...