当前位置： 首页 > news >正文

Axios-入门

news 2026/2/7 18:47:48

介绍

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>

相关文章：

Axios-入门

介绍 Axios对原生Ajax进行了封装&#xff0c;简化书写&#xff0c;快速开发 官网&#xff1a;Axios中文文档 | Axios中文网 (axios-http.cn) 入门 1引入Axios的js文件 <script src"js/axios.js"></script> 2使用Axios发送请求&#xff0c;并获取响应…...

编程日记 2024/6/26 19:06:49

Python22 Pandas库

Pandas 是一个Python数据分析库&#xff0c;它提供了高性能、易于使用的数据结构和数据分析工具。这个库适用于处理和分析输入数据&#xff0c;常见于统计分析、金融分析、社会科学研究等领域。 1.Pandas的核心功能 Pandas 库的核心功能包括&#xff1a; 1.数据结构&#xff…...

编程日记 2024/6/26 19:05:47

不同表格式下的小文件治理方式（开源RC file/ORC/Text非事务表、事务表、Holodesk表格式..）

友情链接&#xff1a; 小文件治理系列之为什么会出现小文件问题&#xff0c;小文件过多问题的危害以及不同阶段下的小文件治理最佳解决手段 小文件过多的解决方法&#xff08;不同阶段下的治理手段&#xff0c;SQL端、存储端以及计算端&#xff09; 概览 在前两篇博文中&am…...

编程日记 2024/6/26 19:03:46

0.7 模拟电视标准 PAL 简介

0.7 模拟电视标准PAL PAL 是一种用于模拟电视的彩色编码系统&#xff0c;全名为逐行倒相&#xff08;Phase Alternating Line&#xff09;。它是三大模拟彩色电视标准之一&#xff0c;另外两个标准是 NTSC 和 SECAM。“逐行倒相”的意思是每行扫描线的彩色信号会跟上一行倒相&…...

编程日记 2024/6/26 19:02:43

vue项目中封装element分页组件

我们都知道封装组件是为了方便在项目中使用&#xff0c;全局封装之后哪个模块使用直接复制就行了&#xff0c;分页在后台项目中用到的地方也是很多的&#xff0c;所以我们就全局封装一下分页组件&#xff0c;以后也方便在项目中使用&#xff0c;接下来封装的这个分页也是elemen…...

编程日记 2024/6/26 19:00:41

linux下docker安装与镜像容器管理

linux下docker安装与镜像容器管理 原文链接&#xff1a;linux下docker安装与镜像容器管理 导言 ubuntu22.04-docker engine安装&#xff0c;以及镜像容器管理 docker非常简单介绍 docker就是一个虚拟化容器&#xff0c;image是镜像&#xff0c;就是一个dockerfile指明这个镜…...

编程日记 2024/6/26 18:59:40

【Unity】RPG2D龙城纷争（六）关卡编辑器之角色编辑

更新日期：2024年6月26日。 项目源码：第五章发布（正式开始游戏逻辑的章节） 索引 简介一、角色编辑模式1.将字段限制为只读2.创建角色（刷角色）3.预览所有角色4.编辑选中角色属性5.移动角色位置6.移除角色简介 上一篇完成的关卡编辑器已支持创建关卡环境（主要由地块单元组…...

编程日记 2024/6/26 18:58:39

【鸿蒙】鸿蒙的Stage和 FA 有什么区别

鸿蒙的Stage模型和FA&#xff08;Feature Ability&#xff09;模型在多个方面存在显著的区别。以下是它们之间的主要差异点&#xff1a; 设计思想和出发点&#xff1a; Stage模型&#xff1a;设计基于为复杂应用而开发的出发点&#xff0c;旨在提供一个更好的开发方式&#xff…...

编程日记 2024/6/26 18:56:37

JAVA小知识29：IO流(上）

IO流是指在计算机中进行输入和输出操作的一种方式&#xff0c;用于读取和写入数据。IO流主要用于处理数据传输&#xff0c;可以将数据从一个地方传送到另一个地方&#xff0c;例如从内存到硬盘&#xff0c;从网络到内存等。IO流在编程中非常常见&#xff0c;特别是在文件操作和…...

编程日记 2024/6/26 18:55:36

大学生毕业季，寄物流快递避雷指南

随着毕业季的来临&#xff0c;大学生们纷纷开始整理自己的行李&#xff0c;准备离开校园&#xff0c;踏入社会。 在这个过程中&#xff0c;寄送快递成为了一个不可或缺的环节。然而&#xff0c;在寄送快递的过程中&#xff0c;如果不注意一些细节&#xff0c;很容易遭遇各种“…...

编程日记 2024/6/26 18:54:35

如何提高项目风险的处理效率？5个重点

提高项目风险的处理效率&#xff0c;有助于迅速识别和应对风险&#xff0c;减少风险导致的延误&#xff0c;降低成本&#xff0c;提升项目质量&#xff0c;确保项目按时交付。如果项目风险处理效率较低&#xff0c;未能及时发现和处理风险&#xff0c;导致问题累积&#xff0c;…...

编程日记 2024/6/26 18:52:32

ZNB40 矢量网络分析仪

ZNB40 矢量网络分析仪 100kHz至40GHz的宽频率范围&#xff0c;具有四个端口和附加信号发生器 概述 R&SZNB40 提供 100 kHz 至 40 GHz 的宽频率范围&#xff0c;具有四个端口和附加信号发生器。 罗德与施瓦茨带四个端口和附加内部信号源的 40 GHz 中档矢量网络分析仪&…...

编程日记 2024/6/26 18:51:31

ingress代理前后端服务跨域

一、前言 ingress对于前后端服务的代理有不同的方式可以实现&#xff0c;前后端服务可以通过不同的域名实现流量的分流策略&#xff0c;不过这需要解决前后端域名不同产生的跨域问题&#xff0c;也可以通过不同的path实现流量的分流策略&#xff0c;该方式不会产生跨域的问题 …...

编程日记 2024/6/26 18:50:29

Python 使用 Thick 方式连接 Oracle Database BaseDB 23ai

Python 使用 Thick 方式连接 Oracle Database BaseDB 23ai 1. 下载Basic.zip 和SQL*Plus&#xff08;.zip&#xff09;2. 配置环境变量3. 连接 23ai 1. 下载Basic.zip 和SQL*Plus&#xff08;.zip&#xff09; 到 https://www.oracle.com/database/technologies/instant-clien…...

编程日记 2024/6/26 18:47:26

Java操作Redis（通过Jedis）

一、环境搭建 这里我使用的SpringBoot版本是2.6.3&#xff0c;所以我引入的Jedis相关版本也不是很高 <dependency><groupId>redis.clients</groupId><artifactId>jedis</artifactId><version>3.2.0</version></dependency><…...

编程日记 2024/6/26 18:45:24

JVM专题二：Java如何进行编译的

编程语言分类 通常我们将编程语言分为高级语言和低级语言&#xff0c;通常高级语言因为其易用性和可移植性而被广泛使用&#xff0c;而低级语言在需要对硬件进行精细控制时非常有用&#xff0c;例如在嵌入式系统编程或操作系统开发中。 高级语言更接近人类语言&#xff0c;易于…...

编程日记 2024/6/26 18:44:23

道路元素位置和方向的坐标系统: 点 线 面 连接点

道路元素位置和方向的坐标系统: 下图道路元素在地球坐标系中的位置&#xff0c;该位置由三个坐标轴&#xff08;x, y, z&#xff09;组成的笛卡尔坐标系来确定。这种描述特别适用于三维建模和地理信息系统&#xff08;GIS&#xff09;中&#xff0c;其中道路被视为一个三维模型…...

编程日记 2024/6/26 18:43:21

二、Docker常用命令

一、帮助启动类命令 1、启动docker [rootlocalhost ~]# systemctl start docker 2、停止docker [rootlocalhost ~]# systemctl stop docker 3、重启docker [rootlocalhost ~]# systemctl stop docker 4、查看docker状态 [rootlocalhost ~]# systemctl status docker 5、开机自…...

编程日记 2024/6/26 18:39:17

通过docker启动Jenkins容器报错

项目场景&#xff1a; 通过docker启动Jenkins容器 问题描述 Jenkins容器启动失败&#xff0c;通过sudo docker logs -f jenkins命令 查看日志如下&#xff1a; touch: cannot touch ‘/var/jenkins_home/copy_reference_file.log’: Permission denied Can not write to /var…...

编程日记 2024/6/26 18:38:15

webui automatic1111上可以跑stable diffusion 3的方法

stable diffusion 3 可以简单句子生成高质量图形&#xff0c;可以生成准确的文字&#xff0c;甚至可以支持中文。 stable diffusion 3 最初只支持API调用&#xff0c;最后把模型也完全开放了。Comfyui因为天生架构优势&#xff0c;第一时间跑起来了。既支持远程API模型调用&am…...

编程日记 2024/6/26 18:37:14

浅谈 React Hooks

React Hooks 是 React 16.8 引入的一组 API&#xff0c;用于在函数组件中使用 state 和其他 React 特性&#xff08;例如生命周期方法、context 等&#xff09;。Hooks 通过简洁的函数接口&#xff0c;解决了状态与 UI 的高度解耦&#xff0c;通过函数式编程范式实现更灵活 Rea…...

编程新知 2025/9/23 15:13:40

工程地质软件市场：发展现状、趋势与策略建议

一、引言 在工程建设领域&#xff0c;准确把握地质条件是确保项目顺利推进和安全运营的关键。工程地质软件作为处理、分析、模拟和展示工程地质数据的重要工具&#xff0c;正发挥着日益重要的作用。它凭借强大的数据处理能力、三维建模功能、空间分析工具和可视化展示手段&…...

编程新知 2025/10/6 6:10:29

Nuxt.js 中的路由配置详解

Nuxt.js 通过其内置的路由系统简化了应用的路由配置&#xff0c;使得开发者可以轻松地管理页面导航和 URL 结构。路由配置主要涉及页面组件的组织、动态路由的设置以及路由元信息的配置。 自动路由生成 Nuxt.js 会根据 pages 目录下的文件结构自动生成路由配置。每个文件都会对…...

编程新知 2026/2/6 16:52:42

C++ 基础特性深度解析

目录 引言 一、命名空间&#xff08;namespace&#xff09; C 中的命名空间​ 与 C 语言的对比​ 二、缺省参数​ C 中的缺省参数​ 与 C 语言的对比​ 三、引用&#xff08;reference&#xff09;​ C 中的引用​ 与 C 语言的对比​ 四、inline&#xff08;内联函数…...

编程新知 2026/1/15 4:25:16

Java入门学习详细版（一）

大家好&#xff0c;Java 学习是一个系统学习的过程&#xff0c;核心原则就是“理论 实践 坚持”&#xff0c;并且需循序渐进&#xff0c;不可过于着急&#xff0c;本篇文章推出的这份详细入门学习资料将带大家从零基础开始&#xff0c;逐步掌握 Java 的核心概念和编程技能。 …...

编程新知 2025/12/14 14:47:02

vue3+vite项目中使用.env文件环境变量方法

vue3vite项目中使用.env文件环境变量方法 .env文件作用命名规则常用的配置项示例使用方法注意事项在vite.config.js文件中读取环境变量方法 .env文件作用 .env 文件用于定义环境变量&#xff0c;这些变量可以在项目中通过 import.meta.env 进行访问。Vite 会自动加载这些环境变…...

编程新知 2026/1/26 19:12:01

AI书签管理工具开发全记录（十九）：嵌入资源处理

1.前言 &#x1f4dd; 在上一篇文章中&#xff0c;我们完成了书签的导入导出功能。本篇文章我们研究如何处理嵌入资源&#xff0c;方便后续将资源打包到一个可执行文件中。 2.embed介绍 &#x1f3af; Go 1.16 引入了革命性的 embed 包&#xff0c;彻底改变了静态资源管理的…...

编程新知 2026/1/30 16:24:23

保姆级教程：在无网络无显卡的Windows电脑的vscode本地部署deepseek

文章目录 1 前言2 部署流程2.1 准备工作2.2 Ollama2.2.1 使用有网络的电脑下载Ollama2.2.2 安装Ollama&#xff08;有网络的电脑&#xff09;2.2.3 安装Ollama&#xff08;无网络的电脑&#xff09;2.2.4 安装验证2.2.5 修改大模型安装位置2.2.6 下载Deepseek模型 2.3 将deepse…...

编程新知 2026/2/6 16:59:24

【笔记】WSL 中 Rust 安装与测试完整记录

#工作记录 WSL 中 Rust 安装与测试完整记录 1. 运行环境 系统&#xff1a;Ubuntu 24.04 LTS (WSL2)架构&#xff1a;x86_64 (GNU/Linux)Rust 版本&#xff1a;rustc 1.87.0 (2025-05-09)Cargo 版本&#xff1a;cargo 1.87.0 (2025-05-06) 2. 安装 Rust 2.1 使用 Rust 官方安…...

编程新知 2026/1/26 14:15:48

Windows安装Miniconda

一、下载 https://www.anaconda.com/download/success 二、安装 三、配置镜像源 Anaconda/Miniconda pip 配置清华镜像源_anaconda配置清华源-CSDN博客 四、常用操作命令 Anaconda/Miniconda 基本操作命令_miniconda创建环境命令-CSDN博客...

编程新知 2026/1/31 7:39:20