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

Java课题笔记~ Axios

news 2026/3/27 19:40:56

Axios 对原生的AJAX进行封装，简化书写。

Axios官网是：https://www.axios-http.cn

2.1 基本使用

axios 使用是比较简单的，分为以下两步：

  • 引入 axios 的 js 文件

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

使用axios 发送请求，并获取响应结果

  • 发送 get 请求

axios({method:"get",url:"http://localhost:8080/ajax-demo1/aJAXDemo1?username=zhangsan"
}).then(function (resp){alert(resp.data);
})
  • 发送 post 请求
axios({method:"post",url:"http://localhost:8080/ajax-demo1/aJAXDemo1",data:"username=zhangsan"
}).then(function (resp){alert(resp.data);
});

axios() 是用来发送异步请求的，小括号中使用 js 对象传递请求相关的参数：

  • method 属性：用来设置请求方式的。取值为 get 或者 post。

  • url 属性：用来书写请求的资源路径。如果是 get 请求，需要将请求参数拼接到路径的后面，格式为： url?参数名=参数值&参数名2=参数值2。

  • data 属性：作为请求体被发送的数据。也就是说如果是 post 请求的话，数据需要作为 data 属性的值。

then() 需要传递一个匿名函数。我们将 then() 中传递的匿名函数称为 回调函数，意思是该匿名函数在发送请求时不会被调用，而是在成功响应后调用的函数。而该回调函数中的 resp 参数是对响应的数据进行封装的对象，通过 resp.data 可以获取到响应的数据。

2.2 快速入门

2.2.1 后端实现

定义一个用于接收请求的servlet，代码如下：

@WebServlet("/axiosServlet")
public class AxiosServlet extends HttpServlet {@Overrideprotected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {System.out.println("get...");//1. 接收请求参数String username = request.getParameter("username");System.out.println(username);//2. 响应数据response.getWriter().write("hello Axios~");}@Overrideprotected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {System.out.println("post...");this.doGet(request, response);}
}

2.2.2 前端实现

  • 引入 js 文件

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

发送 ajax 请求

  • get 请求

axios({method:"get",url:"http://localhost:8080/ajax-demo/axiosServlet?username=zhangsan"
}).then(function (resp) {alert(resp.data);
})
  • post 请求
axios({method:"post",url:"http://localhost:8080/ajax-demo/axiosServlet",data:"username=zhangsan"
}).then(function (resp) {alert(resp.data);
})

整体页面代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><script src="js/axios-0.18.0.js"></script>
<script>//1. get/* axios({method:"get",url:"http://localhost:8080/ajax-demo/axiosServlet?username=zhangsan"}).then(function (resp) {alert(resp.data);})*///2. post  在js中{} 表示一个js对象，而这个js对象中有三个属性axios({method:"post",url:"http://localhost:8080/ajax-demo/axiosServlet",data:"username=zhangsan"}).then(function (resp) {alert(resp.data);})
</script>
</body>
</html>

2.3 请求方法别名

为了方便起见， Axios 已经为所有支持的请求方法提供了别名。如下：

  • get 请求 ： axios.get(url[,config])

  • delete 请求 ： axios.delete(url[,config])

  • head 请求 ： axios.head(url[,config])

  • options 请求 ： axios.option(url[,config])

  • post 请求：axios.post(url[,data[,config])

  • put 请求：axios.put(url[,data[,config])

  • patch 请求：axios.patch(url[,data[,config])

而我们只关注 get 请求和 post 请求。

入门案例中的 get 请求代码可以改为如下：

axios.get("http://localhost:8080/ajax-demo/axiosServlet?username=zhangsan").then(function (resp) {alert(resp.data);
});

入门案例中的 post 请求代码可以改为如下：

axios.post("http://localhost:8080/ajax-demo/axiosServlet","username=zhangsan").then(function (resp) {alert(resp.data);
})

相关文章：

Java课题笔记~ Axios

Axios 对原生的AJAX进行封装&#xff0c;简化书写。 Axios官网是&#xff1a;https://www.axios-http.cn 2.1 基本使用 axios 使用是比较简单的&#xff0c;分为以下两步&#xff1a; 引入 axios 的 js 文件 <script src"js/axios-0.18.0.js"></script…...

编程日记 2023/8/22 11:48:47

ip地址和地理位置有关系吗

在互联网时代&#xff0c;网络已经成为了人们生活中不可或缺的一部分。而在网络通信中&#xff0c;IP地址扮演着非常重要的角色。那么&#xff0c;IP地址和地理位置之间是否有关系呢&#xff1f;虎观代理小二二将从以下几个方面进行探讨。 一、IP地址和地理位置的基本概念 首…...

编程日记 2023/8/22 11:47:45

mac指定node版本 mac node版本降级 mac切换node版本

本文解决问题&#xff1a; mac指定node版本 mac切换node版本 mac node版本降级 第一步 进行nvm 安装操作 brew install nvm 执行 nvm --version nvm --version 出现zsh: command not found: nvm问题去进行配置第二步 nvm配置 1.输入: vim ~/.bash_profile 点击 i 进行插入…...

编程日记 2023/8/22 11:46:44

C# Windows登录界面进行截图，控制鼠标键盘等操作实现（一）

首先常规的账户进程是没办法获取登录界面的信息的&#xff0c;因为登录界面已经不在某个账户下了&#xff0c;登录界面显示了每一个账户的切换。所以得使用System权限的进程。 那么Windows系统究竟是怎么将登录界面与用户桌面隔离开的呢&#xff1f;首先先通过一些Windows操作系…...

编程日记 2023/8/22 11:45:43

因果推断（五）基于谷歌框架Causal Impact的因果推断

因果推断&#xff08;五&#xff09;基于谷歌框架Causal Impact的因果推断 除了传统的因果推断外&#xff0c;还有一些机器学习框架可以使用&#xff0c;本文介绍来自谷歌框架的Causal Impact。该方法基于合成控制法的原理&#xff0c;利用多个对照组数据来构建贝叶斯结构时间…...

编程日记 2023/8/22 11:44:41

VR全景加盟项目如何开展？如何共赢VR时代红利？

VR全景作为一个新兴蓝海项目&#xff0c;相信有着很多人刚接触VR行业的时候都会有这样的疑问&#xff1a;VR全景加盟后项目如何开展&#xff1f;今天&#xff0c;我们就从项目运营的三个阶段为大家讲解。 一、了解项目时 目前VR全景已经被应用到各行各业中去&#xff0c;学校、…...

编程日记 2023/8/22 11:43:38

Win10+anaconda+CUDA+pytorch+vscode配置

Win10anacondaCUDApytorchvscode配置 1.安装anaconda2.安装CUDA确认CUDA版本确认CUDA和pytorch版本安装CUDA 3.安装cudnn4.安装Pytorch5.vscode配置安装VScodevscode配置pytorch环境 1.安装anaconda 官网https://www.anaconda.com 下载安装&#xff0c;路径全英文然后记得有一…...

编程日记 2023/8/22 11:42:37

vue-router在vue2/3区别

构建选项区别 vue2-router const router-new VueRouter({mode:history,base:_name,})vue-next-router import { createRouter,createWebHistory} from vue-next-router const routercreateRouter({history:createHistory(/) })在上述代码中我们发现,vue2中的构建选项mode和ba…...

编程日记 2023/8/22 11:41:36

Apache Doris 入门教程33：统计信息

统计信息 统计信息简介​ Doris 查询优化器使用统计信息来确定查询最有效的执行计划。Doris 维护的统计信息包括表级别的统计信息和列级别的统计信息。 表统计信息&#xff1a; 信息描述row_count表的行数data_size表的⼤⼩&#xff08;单位 byte&#xff09;update_rows收…...

编程日记 2023/8/22 11:40:35

有效需求的特征

如何区分优秀的软件需求和软件需求规格说明书&#xff08;SRS&#xff09;与可能导致问题的需求和规格说明书&#xff1f;在这篇文章中&#xff0c;我们将首先讨论单个需求应该具有的几种不同特性。然后&#xff0c;我们将讨论成功的SRS整体应具有的理想特征。 1.有效需求的特…...

编程日记 2023/8/22 11:39:33

基于51单片机无线温度报警控制器 NRF24L01 多路温度报警系统设计

一、系统方案 1、本设计默认采用STC89C52单片机&#xff0c;如需更换单片机请联系客服。 2、接收板LCD1602液晶实时显示当前检测的2点温度值以及对应的上下限报警值。发射板由DS18B20采集温度值&#xff0c;通过无线模块NRF24L01传给接收板。 3、按键可以设置温度上下限值&…...

编程日记 2023/8/22 11:38:32

Spring Data JPA的@Entity注解

一、示例说明 rules\CouponTypeConverter.java Converter public class CouponTypeConverterimplements AttributeConverter<CouponType, String> {Overridepublic String convertToDatabaseColumn(CouponType couponCategory) {return couponCategory.getCode();}Overr…...

编程日记 2023/8/22 11:37:30

CANoe panel中，Path Dialog如何保存选择的文件路径

这里写目录标题 Path Dialog控件的设置系统变量和环境变量 Path Dialog控件的设置 过滤加载的文件类型 填写格式为&#xff1a;Hex file |.hex 其中Hex file为自定义name&#xff0c;.hex为你想识别的文件类型 系统变量和环境变量 系统变量&#xff1a;在canoe的Environmen…...

编程日记 2023/8/22 11:36:29

关于es中索引，倒排索引的理解

下面是我查询进行理解的东西 也就是说我们ES中的索引就相当于我们mysql中的数据库表&#xff0c;索引库就相当于我们的数据库&#xff0c;我们按照mapping规则会根据相应的字段&#xff08;index为true默认&#xff09;来创建倒排索引&#xff0c;这个倒排索引就相当于我们索引…...

编程日记 2023/8/22 11:35:26

k8s service (二)

K8s service (二) Endpoint Endpoint是kubernetes中的一个资源对象&#xff0c;存储在etcd中&#xff0c;用来记录一个service对应的所有pod访问地址&#xff0c;它是根据service匹配文件中selector描述产生的。 一个Service由一组Pod组成&#xff0c;这些Pod通过Endpoints…...

编程日记 2023/8/22 11:34:25

桌面软件开发框架 Electron、Qt、WPF 和 WinForms 怎么选？

一、Electron Electron 是一个基于 Web 技术的跨平台桌面应用程序开发框架。它使用 HTML、CSS 和 JavaScript 来构建应用程序界面，并借助 Chromium 渲染引擎提供强大的页面渲染能力。Electron 的主要特点包括： 跨平台：Electron 可以在 Windows、macOS 和 Linux 等多个主流操…...

编程日记 2023/8/22 11:33:24

SSM框架的学习与应用(Spring + Spring MVC + MyBatis)-Java EE企业级应用开发学习记录（第二天）Mybatis的深入学习

SSM框架的学习与应用(Spring Spring MVC MyBatis)-Java EE企业级应用开发学习记录&#xff08;第二天&#xff09;Mybatis的深入学习&#xff08;增删改查的操作&#xff09; 上一篇我们的项目搭建好了&#xff0c;也写了简答的Junit测试类进行测试&#xff0c;可以正确映射…...

编程日记 2023/8/22 11:32:23

学习笔记：Opencv实现限制对比度得自适应直方图均衡CLAHE

2023.8.19 为了完成深度学习的进阶&#xff0c;得学习学习传统算法拓展知识面&#xff0c;记录自己的学习心得 CLAHE百科&#xff1a; 一种限制对比度自适应直方图均衡化方法&#xff0c;采用了限制直方图分布的方法和加速的插值方法 clahe&#xff08;限制对比度自适应直方图…...

编程日记 2023/8/22 11:31:22

R语言处理缺失数据（1）-mice

#清空 rm(listls()) gc()###生成模拟数据### #生成100个随机数 library(magrittr) set.seed(1) asd<-rnorm(100, mean 60, sd 10) %>% round #平均60&#xff0c;标准差10 #将10个数随机替换为NA NA_positions <- sample(1:100, 10) asd[NA_positions] <- NA #转…...

编程日记 2023/8/22 11:30:20

SpringBoot自动配置原理

Spring Boot 的自动配置可以根据添加的jar依赖&#xff0c;自动配置 Spring Boot 应用程序。例如&#xff0c;我们想要使用Redis&#xff0c;直接在POM文件中增加spring-boot-starter-data-redis依赖&#xff0c;然后我们配置下连接信息就可以使用了。 那么Spring Boot 是如何…...

编程日记 2023/8/22 11:29:19

AI巨头集体“铸Token”：从ChatGPT到“数字员工工厂”，程序员的狂欢还是危机？

想象一下&#xff1a;你早上醒来&#xff0c;打开电脑&#xff0c;不是自己敲代码&#xff0c;而是对着一只“龙虾”说&#xff1a;“帮我把昨天的Bug修了&#xff0c;顺便给老板发份周报。” 这不是科幻——2026年3月&#xff0c;这事儿正在发生。 全球头部科技公司突然集体“…...

编程新知 2026/3/27 19:14:51

Charticulator：数据可视化的自由创作平台与技术革命

Charticulator&#xff1a;数据可视化的自由创作平台与技术革命 【免费下载链接】charticulator Interactive Layout-Aware Construction of Bespoke Charts 项目地址: https://gitcode.com/gh_mirrors/ch/charticulator 当数据分析师面对预设模板无法表达复杂数据关系时…...

编程新知 2026/3/27 17:01:35

用CODrone数据集训练YOLOv8-OBB：手把手教你搞定无人机旋转目标检测模型

从CODrone到YOLOv8-OBB&#xff1a;实战无人机旋转目标检测全流程指南 无人机航拍视角下的目标检测一直是计算机视觉领域的难点——倾斜视角带来的目标旋转、飞行高度变化导致的尺度差异、复杂背景干扰等问题&#xff0c;让传统水平框检测方法捉襟见肘。本文将带您完整实现从CO…...

编程新知 2026/3/27 15:35:02

安全第一：OpenClaw+GLM-4.7-Flash的本地化数据处理方案

安全第一&#xff1a;OpenClawGLM-4.7-Flash的本地化数据处理方案 1. 为什么我们需要本地化AI解决方案 上个月我帮一位律师朋友处理合同审查任务时&#xff0c;遇到了一个棘手问题——他需要分析上百份涉及商业机密的文件&#xff0c;但担心使用云端AI服务会导致数据泄露。这…...

编程新知 2026/3/27 15:20:56

4步构建高效视频处理流水线：VideoFusion全功能指南

4步构建高效视频处理流水线&#xff1a;VideoFusion全功能指南 【免费下载链接】VideoFusion 一站式短视频拼接软件 无依赖,点击即用,自动去黑边,自动帧同步,自动调整分辨率,批量变更视频为横屏/竖屏 项目地址: https://gitcode.com/gh_mirrors/vi/VideoFusion 功能特性…...

编程新知 2026/3/27 15:00:49

流式清洗新标准：Polars 2.0 Streaming ETL在Kafka-ClickHouse链路中的低延迟落地（端到端＜120ms）

第一章&#xff1a;流式清洗新标准&#xff1a;Polars 2.0 Streaming ETL在Kafka-ClickHouse链路中的低延迟落地&#xff08;端到端<120ms&#xff09; Polars 2.0 引入的原生流式执行引擎&#xff08;Streaming Execution Engine&#xff09;彻底重构了传统批式DataFrame处…...

编程新知 2026/3/27 14:52:48

告别“替身攻击”：手把手教你用零阶优化（ZOO）直接黑盒攻击DNN模型

零阶优化实战&#xff1a;无需替代模型的黑盒对抗攻击指南 当面对一个部署在云端的深度学习API时&#xff0c;传统白盒攻击手段往往束手无策——既无法获取模型架构&#xff0c;也不能执行反向传播。本文将揭示如何运用零阶优化技术&#xff0c;仅通过输入输出查询就能构造高效…...

编程新知 2026/3/27 14:32:29

OpenClaw自动化测试：百川2-13B量化模型多场景准确率评估

OpenClaw自动化测试&#xff1a;百川2-13B量化模型多场景准确率评估 1. 测试背景与目标 去年冬天&#xff0c;我在为团队寻找一个能处理本地自动化任务的AI助手时&#xff0c;偶然发现了OpenClaw这个开源框架。当时最让我头疼的是&#xff0c;市面上的大模型要么太贵&#xf…...

编程新知 2026/3/27 14:24:25

避免Java Stream重复消费：高效过滤Map的策略

本文旨在解决Java Stream在多过滤场景中常见的IllegalStatexception&#xff0c;即流被重复消耗的问题。我们将深入讨论Java Stream的单次使用特性&#xff0c;通过将外部过滤条件转换为集合&#xff0c;优化Map的过滤操作&#xff0c;提供高效、符合最佳实践的解决方案&#x…...

编程新知 2026/3/27 14:09:36

FLUX.1-dev FP8量化模型：让AI绘画不再依赖高端显卡

FLUX.1-dev FP8量化模型&#xff1a;让AI绘画不再依赖高端显卡 【免费下载链接】flux1-dev 项目地址: https://ai.gitcode.com/hf_mirrors/Comfy-Org/flux1-dev 还在为显卡显存不足而无法体验最新AI绘画技术而烦恼吗&#xff1f;FLUX.1-dev FP8量化模型正是为你量身打造…...

编程新知 2026/3/27 13:59:16