Axios-入门

介绍

Axios对原生Ajax进行了封装,简化书写,快速开发

官网:Axios中文文档 | Axios中文网 (axios-http.cn)

入门

1引入Axios的js文件

 <script src="js/axios.js"></script>

2使用Axios发送请求,并获取响应结果

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTE-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=l.0"><title>Ajax</title><script src="js/axios.js"></script>
</head><body><input type="button" value="获取数据Get" onclick="get()"><input type="button" value="获取数据Post" onclick="post()"></body>
<script>function get(){axios({ mehod:"get",url:"http://yapi.smart-xwork.cn/mock/169327/emp/list"}).then(result=>{console.log(result);})}function post(){axios({ mehod:"post",url:"http://yapi.smart-xwork.cn/mock/169327/emp/deleteById",data:"id=1;"}).then(result=>{console.log(result);})}</script></html>

axios({....对象信息....mehod,url(data)}).then(result)=>{}           

then后面接一个result的自定义函数

post有个而外的data

请求方式别名

改写

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTE-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=l.0"><title>Ajax</title><script src="js/axios.js"></script>
</head><body><input type="button" value="获取数据Get" onclick="get()"><input type="button" value="获取数据Post" onclick="post()"></body>
<script>// function get(){//      axios({ mehod:"get",//        url:"http://yapi.smart-xwork.cn/mock/169327/emp/list"//   }).then(result=>{//      console.log(result);//   })// }axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then(result=>{console.log(result);})// function post(){//      axios({ mehod:"post",//       url:"http://yapi.smart-xwork.cn/mock/169327/emp/deleteById",//       data:"id=1;"//     }).then(result=>{//         console.log(result);//     })//}axios.post("http://yapi.smart-xwork.cn/mock/169327/emp/deleteById", "id=1").then(result=>{console.log(result);})</script></html>

案例:网页加载完成,调用vue生命周期的mounted()向服务器发送请求返回数据赋值遍历渲染表格

数据

代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTE-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=l.0"><title>Vue-快速入门</title>
<script src="js/vue.js"></script></head>
<script src="js/axios.js"></script>
<body>
<div id ="app"><table border="1"cellspacing="0" width="60%"><tr><th>编号</th><th>姓名</th><th>图像</th><th>性别</th><th>职位</th><th>入职时间</th><th>最后操作时间</th></tr><tr v-for="(emp,index) in emps" align="center"><th>{{index+1}}</th><th>{{emp.name}}</th><th><img : src="emp.image" width="70px" height="50px"></th><th v-if="emp.gender=1">男</th><th v-else>女</th><th>{{emp.jop}}</th><th>{{emp.entrydate}}</th><th>{{emp.updatetime}}</th></tr></table>
</div>
</body>
<script>
//定义vue对象new Vue({el:"#app",//vue接管区域data:{emps:[]},methods:{},mounted(){axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then(result=>{this.emps=result.data.data;})}})
</script>
</html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/361256.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

链式队列算法库构建

学习贺利坚老师课程,构建链式队列算法库 数据结构之自建算法库——链队&#xff08;链式队列&#xff09;_数据结构函数链队列的算法框架有哪些-CSDN博客文章浏览阅读6.2k次&#xff0c;点赞3次&#xff0c;收藏9次。本文针对数据结构基础系列网络课程(3)&#xff1a;栈和队列…

在win7系统电脑安装node16的版本(已成功安装运行)

很多银行的项目行方都要求内网开发&#xff0c;但是我遇到的几个银行基本都是win7系统的电脑&#xff0c;而前端的项目又是需要高版本的node才能跑起来&#xff0c;所有就记录此解决方案文章&#xff01; 这是下载node安装包的地址&#xff1a;Index of /dist/ 在这里先下载自…

树形结构的勾选、取消勾选、删除、清空已选、回显、禁用

树形结构的勾选、取消勾选、删除、清空已选、回显、禁用 基本页面&#xff1a; 分为上传文件和编辑的页面 代码实现要点&#xff1a; 上传文件页面&#xff1a; 点开选择范围弹窗&#xff0c;三个radio单选框都为可选状态&#xff0c;默认显示的是第一个单选框&#xff08;按…

晶方科技:台积电吃饱,封装迎春?

半导体产业链掀起涨价潮&#xff0c;先进封装迎接利好。 这里我们来聊国内先进封装企业——晶方科技。 近期&#xff0c;由于产能供不应求&#xff0c;台积电决定上调先进封装产品价格&#xff0c;还表示订单已经排到2026年。 大哥吃不下了&#xff0c;剩下的订单全都是空间。…

Shell编程规范与变量-01

一、Shell脚本概述 在一些复杂的 Linux 维护工作中&#xff0c;大量重复性的输入和交互操作不仅费时费力&#xff0c;而且容易出错&#xff0c;而编写一个恰到好处的 Shell 脚本程序&#xff0c;可以批量处理、自动化地完成一系列维护任务&#xff0c;大大减轻管理员的负担。 1…

在Ubuntu上安装Python3

安装 python3 pip sudo apt -y install python3 python3-pip升级 pip python3 -m pip install --upgrade pip验证查看版本 python3 --version

web渗透-SSRF漏洞及discuz论坛网站测试

一、简介 ssrf(server-side request forgery:服务器端请求伪造&#xff09;是一种由攻击者构造形成由服务端发起请求的一个安全漏洞。一般情况下&#xff0c;ssrf是要目标网站的内部系统。(因为他是从内部系统访问的&#xff0c;所有可以通过它攻击外网无法访问的内部系统&…

excel字符串列的文本合并

excel表有两列&#xff0c;第一列是“姓名”&#xff0c;第二列是“诊断”&#xff0c;有高血压、糖尿病等。我想出一个统计表&#xff0c;统计“姓名”&#xff0c;把某一个姓名的诊断不重复的用、拼接起来&#xff0c;比如“张三”的诊断为“点高血压”、糖尿病。我们可以用T…

适用于轨道交通专用的板卡式网管型工业以太网交换机

是网管型 CompactPCI板卡式冗余环网交换机。前面板带有6个 10/100/1000Base-T(X)M12接口。后面的CPCI接口有 8个10/100/1000Base-T (X) 以太网接口。 是特别为轨道交通行业EN50155标准要求而设计的坚固型交换机。它同时具有以下特性&#xff1a; ● 支持2线以太网距离扩展端口&…

springcloud第4季 springcloud-alibaba之nacos+openfegin+gateway+sentinel熔断限流【经典案例】

一 说明 1.1 架构说明 本案例实现原理&#xff1a; 采用alibaba的nacos&#xff0c;openfegin&#xff0c;sentinel&#xff0c;gateway等组件实现熔断限流。 主要理解sentinel的ResouceSentinel和fallback的区别联系。 ResourceSentinel 主要是页面配置熔断限流规则&#…

试析C#编程语言的特点及功能

行步骤&#xff0c;而不必创建新方法。其声明方法是在实例化委托基础上&#xff0c;加一对花括号以代表执行范围&#xff0c;再加一个分号终止语句。 2.3.3 工作原理 C#编译器在“匿名”委托时会自动把执行代码转换成惟一命名类里的惟一命名函数。再对存储代码块的委托进行设…

【干货】Vue3 组件通信方式详解

前言 毫无疑问&#xff0c;组件通信是Vue中非常重要的技术之一&#xff0c;它的出现能够使我们非常方便的在不同组件之间进行数据的传递&#xff0c;以达到数据交互的效果。所以&#xff0c;学习组件通信技术是非常有必要的&#xff0c;本文将总结Vue中关于组件通信的八种方式…

【博士每天一篇文献-算法】Fearnet Brain-inspired model for incremental learning

阅读时间&#xff1a;2023-12-16 1 介绍 年份&#xff1a;2017 作者&#xff1a;Ronald Kemker&#xff0c;美国太空部队&#xff1b;Christopher Kanan&#xff0c;罗切斯特大学 期刊&#xff1a; arXiv preprint 引用量&#xff1a;520 Kemker R, Kanan C. Fearnet: Brain-…

宠物领养救助管理系带万字文档java项目基于springboot+vue的宠物管理系统java课程设计java毕业设计

文章目录 宠物领养救助管理系统一、项目演示二、项目介绍三、万字项目文档四、部分功能截图五、部分代码展示六、底部获取项目源码带万字文档&#xff08;9.9&#xffe5;带走&#xff09; 宠物领养救助管理系统 一、项目演示 宠物领养救助系统 二、项目介绍 基于springbootv…

WEB与低代码:B/S架构在开发中的应用与优势

在互联网迅猛发展的今天&#xff0c;WEB应用已经成为人们日常生活和工作中不可或缺的一部分。随着技术的进步和需求的多样化&#xff0c;开发高效、灵活且易于维护的WEB应用变得尤为重要。B/S架构&#xff08;Browser/Server Architecture&#xff09;作为一种常见的WEB应用架构…

Chatopera 云服务实现类海尔服务智能客服的功能点比较 | Chatopera

在上一篇文章中&#xff0c;我分享了《智能客服体验分析&#xff0c;使用小程序海尔服务完成电器报修》。如果使用 Chatopera 云服务实现一个类似的应用&#xff0c;如何做呢&#xff1f;借助 Chatopera 云服务 可以实现一个智能客服&#xff0c;那么和现在的海尔服务小程序会有…

WordPress软件下载主题Inpandora

Inpandora&#xff08;中文名为潘多拉&#xff09;是一款基于软件下载站定制的WordPress主题&#xff0c;帮助站长使用WordPress快速搭建一个专业的WordPress软件博客。Inpandora这款WordPress主题可以说是因软件而生&#xff0c;从UI设计到后台设置功能&#xff0c;都充分体现…

云计算运维工程师的突发状况处理

云计算运维工程师在应对突发的故障和紧急情况时,需要采取一系列迅速而有效的措施来最小化服务中断的时间并恢复系统的稳定性。 以下是一些关键步骤和策略: 快速响应: 立即识别并确认故障的性质和范围。通知团队成员和相关的利益相关者,确保所有人了解当前情况。故障诊断:…

MD5加密接口

签名算法 app_key和app_secret由对方系统提供 MD5_CALCULATE_HASH_FOR_CHAR&#xff08;中文加密与JAVA不一致&#xff09; 代码&#xff1a; *获取传输字段名的ASCII码&#xff0c;根据ASCII码对字段名进行排序SELECT * FROM zthr0051WHERE functionid iv_functionidINTO …

想布局短视频赛道,云微客AI矩阵系统告诉你诀窍

随着人工智能技术的不断发展&#xff0c;越来越多的企业和个人创作者开始意识到智能化的重要性。而现阶段&#xff0c;随着短视频市场的膨胀扩大&#xff0c;批量成片、智能创作、定时发布是当下重要的趋势&#xff0c;企业如果想在短视频赛道分一杯羹&#xff0c;智能化的平台…