通过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 安装之后采用按需引入 ...
随机推荐
- Python设计模式----2.工厂模式
工厂方法模式是简单工厂模式的衍生,解决了许多简单工厂模式的问题 首先完全实现'开-闭 原则',实现了可扩展.其次更复杂的层次结构,可以应用于产品结果复杂的场合. 工厂方法模式的对简单工厂模式进行了抽象 ...
- MindSpore编译构建后Vmap模块的RuntimeError问题
技术背景 这篇文章来源于MindSpore仓库中的一个Issue,简单描述问题就是,如果你用MindSpore开发了一个python软件供别人使用,那么很有可能涉及到编译构建的问题.但是如果直接使用编 ...
- CC1TransformedMap链学习
跟着看了白日梦组长的视频,记录一下调试学习过程 CC1链学习 TransformedMap链 ObjectInputStream.readObject() AnnotationInvocationHa ...
- The request client is not a secure context and the resource is in more-private address space `privat
Chrome跨域问题:has been blocked by CORS policy: The request client is not a secure context and the resou ...
- 有用的JavaScript技巧
首次为变量赋值时务必使用var关键字 变量没有声明而直接赋值得话,默认会作为一个新的全局变量,要尽量避免使用全局变量. 使用===取代== ==和!=操作符会在需要的情况下自动转换数据类型.但===和 ...
- 嘉楠k210 kd233官方demo板gpio点灯实验
使用maixpy micropython开发 import utime from Maix import GPIO from board import board_info from fpioa_m ...
- Vue-flask 展示小电影
显示小电影 前端Vue <body> <div id="app"> <button @click="handleLoad"> ...
- DataV 3D 平面地图 2.0 焕新上线
简介:DataV3月,3D平面地图2.0现已上线~ 3D 平面地图 2.0 现已上线~ 让我们来看看更新了哪些功能吧! 01 交互升级,省市区自由下钻 自带行政区域数据,无需配置: 甚至,可以通 ...
- 使用 SizeBench 分析 Exe 文件体积
本文将介绍微软开源免费的 SizeBench 工具,使用 SizeBench 工具可以用来分析 Exe 二进制文件的体积,分析 Exe 文件大小里面有哪些是可以优化的 下载安装方式: 请前往应用商店安 ...
- Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: "/xxx". at createRouterError 的说明和解决
错误说明 Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: & ...