Ajax和axios简单用法
Ajax
Ajax（Asynchronous JavaScript And XML，异步的JavaScript和XML）。
作用是：
- 数据交换：通过
Ajax可以给服务器发送请求，并获取服务器响应的数据。 - 异步交互：可以在不重新加载整个页面的情况下，与服务器交换并更新部分网页的技术，如：搜索联想、用户名是否可用的校验等等。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script></head>
<body><input type="button" value="获取数据" onclick="getClick()">
</body>
<script>function getClick() {// 创建一个XMLHttpRequest对象let XmlHttpRequest = new XMLHttpRequest();// 设置请求方式和请求地址XmlHttpRequest.open('GET', 'http://yapi.smart-xwork.cn/mock/169327/emp/list');XmlHttpRequest.send(); // 发送请求// 监听请求状态XmlHttpRequest.onreadystatechange = function() {if (XmlHttpRequest.readyState === 4 && XmlHttpRequest.status === 200) {// console.log(XmlHttpRequest.responseText);let data = JSON.parse(XmlHttpRequest.responseText);console.log(data);}}}
</script>
</html>
Axios
Axios对原生的Ajax进行了封装，简化书写，快速开发。
需要引入Axios的JS文件，使用Axios发送请求，并获取响应结果。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body><script>axios({method: 'get',url: 'http://localhost:3000/lab'}).then((response) => {console.log(response.data)});axios({method: 'post',url: 'http://localhost:3000/lab',data: {name: 'Lab 1',description: 'Lab 1 description'}}).then((response) => {console.log(response.data)});</script>
</body>
</html>
请求方式别名：
axios.get(url [,config])
axios.delete(url [,config])
axios.post(url [,data [,config]])
axios.put(url [,data [,config]])
AJAX - XMLHttpRequest 对象 (w3school.com.cn)
Axios中文文档 | Axios中文网 (axios-http.cn)
相关文章：
Ajax和axios简单用法
Ajax Ajax（Asynchronous JavaScript And XML，异步的JavaScript和XML）。 作用是： 数据交换：通过Ajax可以给服务器发送请求，并获取服务器响应的数据。异步交互：可以在不重新加载整个页面的情况…...
Chillax2024.08.01 |免费的白噪音软件
支持多种声音叠加，单独调整音量，定时功能，完全免费。 大小：13.5M 百度网盘：https://pan.baidu.com/s/1dWpdYoO1bPCnHR1bXpTZEg?pwdolxt 夸克网盘：https://pan.quark.cn/s/89dc88c56e26 移动网盘ÿ…...
Python自动化办公：从Excel到PDF生成的全流程
解锁Python编程的无限可能：《奇妙的Python》带你漫游代码世界 在现代办公环境中，数据处理和报表生成是日常工作中非常重要的一环。Python作为一门灵活且功能强大的编程语言，能够通过一系列开源库实现办公自动化。本文将详细讲解如何使用Python实现从Excel数据处理到生成PDF…...
allegro 不同页面相同网路的连接
一、cadence学习笔记（1）-原理图库制作 绘制好各个界面 放置OFFPAGE 绘制好单个界面是这个样子的，并将剩下的界面进行相同的操作 所有界面完成后，进入设计界面 右键design1.dsn选择Annotate… 点击OK后可以看到WiFi界面OFFPAGE旁边…...
医院管理新趋势：Spring Boot技术引领
4系统概要设计 4.1概述 本系统采用B/S结构(Browser/Server,浏览器/服务器结构)和基于Web服务两种模式，是一个适用于Internet环境下的模型结构。只要用户能连上Internet,便可以在任何时间、任何地点使用。系统工作原理图如图4-1所示： 图4-1系统工作原理…...
Java 新手教程！面向对象设计一口气讲完！[]~(￣▽￣)~*（中）
目录 Java 内部类 Java面向对象的设计 - Java 内部类 什么是内部类？ 例子 使用内部类的优点 访问局部变量的限制 内部类和继承 内部类中没有静态成员 生成的内部类的类文件 静态上下文中的内类 Java 内部类类型 Java面向对象设计 - Java内部类类型 成员内…...
驰骋低代码功能升级 - 实体功能权限控制
1. 权限控制升级概述 新增功能：对新建、保存、删除、归档、撤销归档等操作的按钮进行精细化的权限控制。展示位置：这些权限控制体现在查询页面和实体卡片页面的工具栏按钮上。 2. 权限控制方式 新建 0. 不控制：任何人都可以新建。1. 指定岗…...
Matlab|考虑阶梯式碳交易机制与电制氢的综合能源系统热电优化
目录 1 主要内容 2 部分程序 3 程序结果 4 下载链接 1 主要内容 该程序复现《考虑阶梯式碳交易机制与电制氢的综合能源系统热电优化》，主要内容：“双碳”背景下，为提高能源利用率，优化设备的运行灵活性，进一步降低…...
Midjourney零基础学习
Midjourney学习笔记TOP01 什么是AI艺术 AI艺术指的是使用AI技术创作的艺术作品，包括AI诗歌、AI音乐、AI绘画等多种艺术表现形式；AI艺术可以被视为计算机程序与人类合作创作作品；除了Midjourney，比较流行的AI图像生成工具还有Stab…...
词嵌入（Word Embedding）之Word2Vec、GloVe、FastText
简介：个人学习分享，如有错误，欢迎批评指正。 词嵌入（Word Embedding）是一种将词语映射到低维稠密向量空间的技术，能够捕捉词与词之间的语义关系。Word2Vec、GloVe、FastText 是常见的词嵌入方法，…...
Vue82 路由器的两种工作模式 以及 node express 部署前端
笔记 对于一个url来说，什么是hash值？—— #及其后面的内容就是hash值。hash值不会包含在 HTTP 请求中，即：hash值不会带给服务器。hash模式： 地址中永远带着#号，不美观 。若以后将地址通过第三方手机app分享…...
[C#]使用纯opencvsharp部署yolov11-onnx图像分类模型
【官方框架地址】 https://github.com/ultralytics/ultralytics.git 【算法介绍】 使用纯OpenCvSharp部署YOLOv11-ONNX图像分类模型是一项复杂的任务，但可以通过以下步骤实现： 准备环境：首先，确保开发环境已安装OpenCvSharp和必…...
【机器学习-无监督学习】概率图模型
【作者主页】Francek Chen 【专栏介绍】 ⌈ ⌈ ⌈Python机器学习 ⌋ ⌋ ⌋ 机器学习是一门人工智能的分支学科，通过算法和模型让计算机从数据中学习，进行模型训练和优化，做出预测、分类和决策支持。Python成为机器学习的首选语言，…...
每日学习一个数据结构-AVL树
文章目录 概述一、定义与特性二、平衡因子三、基本操作四、旋转操作五、应用场景 Java代码实现 概述 AVL树是一种自平衡的二叉查找树，由两位俄罗斯数学家G.M.Adelson-Velskii和E.M.Landis在1962年发明。想了解树的相关概念，请点击这里。以下是对AVL树的…...
课堂点名系统小程序的设计
管理员账户功能包括：系统首页，个人中心，管理员管理，论坛信息管理，基础数据管理，课程信息管理，课程考勤管理，轮播图信息 微信端账号功能包括：系统首页，论坛信…...
使用Python查找WeChat和QQ的安装路径和文档路径
在日常工作和生活中，我们经常需要查找某些应用程序的安装位置或者它们存储文件的位置。特别是对于像WeChat（微信）和QQ这样的即时通讯软件，了解它们的文件存储位置可以帮助我们更好地管理我们的聊天记录和共享文件。今天࿰…...
【AI大模型】深入Transformer架构：编码器部分的实现与解析（下）
目录 🍔 编码器介绍 🍔 前馈全连接层 2.1 前馈全连接层 2.2 前馈全连接层的代码分析 2.3 前馈全连接层总结 🍔 规范化层 3.1 规范化层的作用 3.2 规范化层的代码实现 3.3 规范化层总结 🍔 子层连接结构 4.1 子层连接结…...
【数据结构】【栈】算法汇总
一、顺序栈的操作 1.准备工作 #define STACK_INIT_SIZE 100 #define STACKINCREMENT 10 typedef struct{SElemType*base;SElemType*top;int stacksize; }SqStack; 2.栈的初始化 Status InitStack(SqStack &S){S.base(SElemType*)malloc(MAXSIZE*sizeof(SElemType));if(…...
如何训练自己的大模型，答案就在这里。
训练自己的AI大模型是一个复杂且资源密集型的任务，涉及多个详细步骤、数据集需求以及计算资源要求。以下是根据搜索结果提供的概述： 详细步骤 \1. 设定目标： - 首先需要明确模型的应用场景和目标，比如是进行分类、回归、生成文本…...
React18新特性
React 18新特性详解如下： 并发渲染（Concurrent Rendering）： React 18引入了并发渲染特性，允许React在等待异步操作（如数据获取）时暂停和恢复渲染，从而提供更平滑的用户体验。 通过时…...
vscode里如何用git
打开vs终端执行如下： 1 初始化 Git 仓库（如果尚未初始化） git init 2 添加文件到 Git 仓库 git add . 3 使用 git commit 命令来提交你的更改。确保在提交时加上一个有用的消息。 git commit -m "备注信息" 4 …...
rknn优化教程（二）
文章目录 1. 前述2. 三方库的封装2.1 xrepo中的库2.2 xrepo之外的库2.2.1 opencv2.2.2 rknnrt2.2.3 spdlog 3. rknn_engine库 1. 前述 OK，开始写第二篇的内容了。这篇博客主要能写一下： 如何给一些三方库按照xmake方式进行封装，供调用如何按…...
Python爬虫实战：研究feedparser库相关技术
1. 引言 1.1 研究背景与意义 在当今信息爆炸的时代，互联网上存在着海量的信息资源。RSS（Really Simple Syndication）作为一种标准化的信息聚合技术，被广泛用于网站内容的发布和订阅。通过 RSS，用户可以方便地获取网站更新的内容，而无需频繁访问各个网站。 然而，互联网…...
渲染学进阶内容——模型
最近在写模组的时候发现渲染器里面离不开模型的定义，在渲染的第二篇文章中简单的讲解了一下关于模型部分的内容，其实不管是方块还是方块实体，都离不开模型的内容 🧱 一、CubeListBuilder 功能解析 CubeListBuilder 是 Minecraft Java 版模型系统的核心构建器，用于动态创…...
UR 协作机器人「三剑客」：精密轻量担当（UR7e）、全能协作主力（UR12e）、重型任务专家（UR15）
UR协作机器人正以其卓越性能在现代制造业自动化中扮演重要角色。UR7e、UR12e和UR15通过创新技术和精准设计满足了不同行业的多样化需求。其中，UR15以其速度、精度及人工智能准备能力成为自动化领域的重要突破。UR7e和UR12e则在负载规格和市场定位上不断优化…...
处理vxe-table 表尾数据是单独一个接口，表格tableData数据更新后，需要点击两下，表尾才是正确的
修改bug思路： 分别把 tabledata 和 表尾相关数据 console.log() 发现 更新数据先后顺序不对 settimeout延迟查询表格接口 ——测试可行 升级↑：async await 等接口返回后再开始下一个接口查询 ________________________________________________________…...
【SSH疑难排查】轻松解决新版OpenSSH连接旧服务器的“no matching...“系列算法协商失败问题
【SSH疑难排查】轻松解决新版OpenSSH连接旧服务器的"no matching..."系列算法协商失败问题 摘要： 近期，在使用较新版本的OpenSSH客户端连接老旧SSH服务器时，会遇到 "no matching key exchange method found", "n…...
为什么要创建 Vue 实例
核心原因：Vue 需要一个「控制中心」来驱动整个应用 你可以把 Vue 实例想象成你应用的**「大脑」或「引擎」。它负责协调模板、数据、逻辑和行为，将它们变成一个活的、可交互的应用**。没有这个实例，你的代码只是一堆静态的 HTML、JavaScript 变量和函数，无法「活」起来。 …...
sshd代码修改banner
sshd服务连接之后会收到字符串： SSH-2.0-OpenSSH_9.5 容易被hacker识别此服务为sshd服务。 是否可以通过修改此banner达到让人无法识别此服务的目的呢？ 不能。因为这是写的SSH的协议中的。 也就是协议规定了banner必须这么写。 SSH- 开头，…...
比特币：固若金汤的数字堡垒与它的四道防线
第一道防线：机密信函——无法破解的哈希加密 将每一笔比特币交易比作一封在堡垒内部传递的机密信函。 解释“哈希”（Hashing）就是一种军事级的加密术（SHA-256），能将信函内容（交易细节…...