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

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&#xff08;Asynchronous JavaScript And XML&#xff0c;异步的JavaScript和XML&#xff09;。 作用是&#xff1a; 数据交换&#xff1a;通过Ajax可以给服务器发送请求&#xff0c;并获取服务器响应的数据。异步交互&#xff1a;可以在不重新加载整个页面的情况…...

Chillax2024.08.01 |免费的白噪音软件

支持多种声音叠加&#xff0c;单独调整音量&#xff0c;定时功能&#xff0c;完全免费。 大小&#xff1a;13.5M 百度网盘&#xff1a;https://pan.baidu.com/s/1dWpdYoO1bPCnHR1bXpTZEg?pwdolxt 夸克网盘&#xff1a;https://pan.quark.cn/s/89dc88c56e26 移动网盘&#xff…...

Python自动化办公:从Excel到PDF生成的全流程

解锁Python编程的无限可能:《奇妙的Python》带你漫游代码世界 在现代办公环境中,数据处理和报表生成是日常工作中非常重要的一环。Python作为一门灵活且功能强大的编程语言,能够通过一系列开源库实现办公自动化。本文将详细讲解如何使用Python实现从Excel数据处理到生成PDF…...

allegro 不同页面相同网路的连接

一、cadence学习笔记&#xff08;1&#xff09;-原理图库制作 绘制好各个界面 放置OFFPAGE 绘制好单个界面是这个样子的&#xff0c;并将剩下的界面进行相同的操作 所有界面完成后&#xff0c;进入设计界面 右键design1.dsn选择Annotate… 点击OK后可以看到WiFi界面OFFPAGE旁边…...

医院管理新趋势:Spring Boot技术引领

4系统概要设计 4.1概述 本系统采用B/S结构(Browser/Server,浏览器/服务器结构)和基于Web服务两种模式&#xff0c;是一个适用于Internet环境下的模型结构。只要用户能连上Internet,便可以在任何时间、任何地点使用。系统工作原理图如图4-1所示&#xff1a; 图4-1系统工作原理…...

Java 新手教程!面向对象设计一口气讲完![]~( ̄▽ ̄)~*(中)

目录 Java 内部类 Java面向对象的设计 - Java 内部类 什么是内部类&#xff1f; 例子 使用内部类的优点 访问局部变量的限制 内部类和继承 内部类中没有静态成员 生成的内部类的类文件 静态上下文中的内类 Java 内部类类型 Java面向对象设计 - Java内部类类型 成员内…...

驰骋低代码功能升级 - 实体功能权限控制

1. 权限控制升级概述 新增功能&#xff1a;对新建、保存、删除、归档、撤销归档等操作的按钮进行精细化的权限控制。展示位置&#xff1a;这些权限控制体现在查询页面和实体卡片页面的工具栏按钮上。 2. 权限控制方式 新建 0. 不控制&#xff1a;任何人都可以新建。1. 指定岗…...

Matlab|考虑阶梯式碳交易机制与电制氢的综合能源系统热电优化

目录 1 主要内容 2 部分程序 3 程序结果 4 下载链接 1 主要内容 该程序复现《考虑阶梯式碳交易机制与电制氢的综合能源系统热电优化》&#xff0c;主要内容&#xff1a;“双碳”背景下&#xff0c;为提高能源利用率&#xff0c;优化设备的运行灵活性&#xff0c;进一步降低…...

Midjourney零基础学习

Midjourney学习笔记TOP01 什么是AI艺术 AI艺术指的是使用AI技术创作的艺术作品&#xff0c;包括AI诗歌、AI音乐、AI绘画等多种艺术表现形式&#xff1b;AI艺术可以被视为计算机程序与人类合作创作作品&#xff1b;除了Midjourney&#xff0c;比较流行的AI图像生成工具还有Stab…...

词嵌入(Word Embedding)之Word2Vec、GloVe、FastText

简介&#xff1a;个人学习分享&#xff0c;如有错误&#xff0c;欢迎批评指正。 词嵌入&#xff08;Word Embedding&#xff09;是一种将词语映射到低维稠密向量空间的技术&#xff0c;能够捕捉词与词之间的语义关系。Word2Vec、GloVe、FastText 是常见的词嵌入方法&#xff0c…...

Vue82 路由器的两种工作模式 以及 node express 部署前端

笔记 对于一个url来说&#xff0c;什么是hash值&#xff1f;—— #及其后面的内容就是hash值。hash值不会包含在 HTTP 请求中&#xff0c;即&#xff1a;hash值不会带给服务器。hash模式&#xff1a; 地址中永远带着#号&#xff0c;不美观 。若以后将地址通过第三方手机app分享…...

[C#]使用纯opencvsharp部署yolov11-onnx图像分类模型

【官方框架地址】 https://github.com/ultralytics/ultralytics.git 【算法介绍】 使用纯OpenCvSharp部署YOLOv11-ONNX图像分类模型是一项复杂的任务&#xff0c;但可以通过以下步骤实现&#xff1a; 准备环境&#xff1a;首先&#xff0c;确保开发环境已安装OpenCvSharp和必…...

【机器学习-无监督学习】概率图模型

【作者主页】Francek Chen 【专栏介绍】 ⌈ ⌈ ⌈Python机器学习 ⌋ ⌋ ⌋ 机器学习是一门人工智能的分支学科&#xff0c;通过算法和模型让计算机从数据中学习&#xff0c;进行模型训练和优化&#xff0c;做出预测、分类和决策支持。Python成为机器学习的首选语言&#xff0c;…...

每日学习一个数据结构-AVL树

文章目录 概述一、定义与特性二、平衡因子三、基本操作四、旋转操作五、应用场景 Java代码实现 概述 AVL树是一种自平衡的二叉查找树&#xff0c;由两位俄罗斯数学家G.M.Adelson-Velskii和E.M.Landis在1962年发明。想了解树的相关概念&#xff0c;请点击这里。以下是对AVL树的…...

课堂点名系统小程序的设计

管理员账户功能包括&#xff1a;系统首页&#xff0c;个人中心&#xff0c;管理员管理&#xff0c;论坛信息管理&#xff0c;基础数据管理&#xff0c;课程信息管理&#xff0c;课程考勤管理&#xff0c;轮播图信息 微信端账号功能包括&#xff1a;系统首页&#xff0c;论坛信…...

使用Python查找WeChat和QQ的安装路径和文档路径

在日常工作和生活中&#xff0c;我们经常需要查找某些应用程序的安装位置或者它们存储文件的位置。特别是对于像WeChat&#xff08;微信&#xff09;和QQ这样的即时通讯软件&#xff0c;了解它们的文件存储位置可以帮助我们更好地管理我们的聊天记录和共享文件。今天&#xff0…...

【AI大模型】深入Transformer架构:编码器部分的实现与解析(下)

目录 &#x1f354; 编码器介绍 &#x1f354; 前馈全连接层 2.1 前馈全连接层 2.2 前馈全连接层的代码分析 2.3 前馈全连接层总结 &#x1f354; 规范化层 3.1 规范化层的作用 3.2 规范化层的代码实现 3.3 规范化层总结 &#x1f354; 子层连接结构 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大模型是一个复杂且资源密集型的任务&#xff0c;涉及多个详细步骤、数据集需求以及计算资源要求。以下是根据搜索结果提供的概述&#xff1a; 详细步骤 \1. 设定目标&#xff1a; - 首先需要明确模型的应用场景和目标&#xff0c;比如是进行分类、回归、生成文本…...

React18新特性

React 18新特性详解如下&#xff1a; 并发渲染&#xff08;Concurrent Rendering&#xff09;&#xff1a; React 18引入了并发渲染特性&#xff0c;允许React在等待异步操作&#xff08;如数据获取&#xff09;时暂停和恢复渲染&#xff0c;从而提供更平滑的用户体验。 通过时…...

自编码器在异常检测中的实战应用:以金融交易数据为例

自编码器在金融异常检测中的实战指南&#xff1a;从数据清洗到模型部署 金融交易数据中的异常行为检测一直是风险控制的核心环节。传统基于规则的系统难以应对日益复杂的欺诈模式&#xff0c;而自编码器这类无监督学习模型正在改变游戏规则。本文将带您从零构建一个完整的异常检…...

ARM64架构下利用docker-compose实现tendis单机版高效离线部署指南

1. 为什么选择ARM64架构部署Tendis&#xff1f; 最近几年ARM架构处理器越来越流行&#xff0c;从树莓派到苹果M系列芯片&#xff0c;再到各种云服务器的ARM实例&#xff0c;性能提升明显的同时功耗还更低。我去年接手的一个项目就要求全部跑在ARM64服务器上&#xff0c;当时部署…...

深入解析:set_clock_groups中-physically_exclusive与-asynchronous的约束协同与必要性

1. 从Spyglass报错看时钟约束的必要性 最近在跑Spyglass做SDC检查时&#xff0c;遇到了一个让我困惑的报错&#xff1a;"当两个时钟设置成物理互斥或逻辑互斥时&#xff0c;需要另外加上这两个时钟是异步设置的约束"。这让我很纳闷&#xff0c;明明已经设置了物理互…...

[特殊字符] Local Moondream2图文对话教程:详细步骤实现自定义问题提问

Local Moondream2图文对话教程&#xff1a;详细步骤实现自定义问题提问 1. 引言&#xff1a;让电脑拥有"眼睛"的智能工具 你是否曾经希望电脑能像人一样看懂图片&#xff0c;并且回答关于图片内容的问题&#xff1f;Local Moondream2就是这样一款神奇的工具&#x…...

如何通过League-Toolkit智能工具提升英雄联盟操作效率

如何通过League-Toolkit智能工具提升英雄联盟操作效率 【免费下载链接】League-Toolkit 兴趣使然的、简单易用的英雄联盟工具集。支持战绩查询、自动秒选等功能。基于 LCU API。 项目地址: https://gitcode.com/gh_mirrors/le/League-Toolkit 你是否曾因错过对局确认而被…...

Qwen3-TTS声音克隆入门指南:上传音频→选择语种→生成自然语音三步走

Qwen3-TTS声音克隆入门指南&#xff1a;上传音频→选择语种→生成自然语音三步走 想不想让AI用你自己的声音说话&#xff1f;或者&#xff0c;想不想用一段短短的录音&#xff0c;就克隆出能说十几种语言的“数字分身”&#xff1f;今天&#xff0c;我们就来手把手教你&#x…...

如何用dashdot打造高颜值服务器监控面板?完整配置教程

如何用dashdot打造高颜值服务器监控面板&#xff1f;完整配置教程 【免费下载链接】dashdot A simple, modern server dashboard, primarily used by smaller private servers 项目地址: https://gitcode.com/gh_mirrors/da/dashdot dashdot是一款现代化的服务器监控面板…...

SenseVoiceSmall实战案例:如何用AI分析会议录音中的情绪变化

SenseVoiceSmall实战案例&#xff1a;如何用AI分析会议录音中的情绪变化 1. 会议录音分析的痛点与解决方案 在日常工作中&#xff0c;会议录音分析一直是个耗时费力的任务。传统方法需要人工反复听取录音&#xff0c;不仅效率低下&#xff0c;还容易遗漏关键信息。特别是会议…...

计算机网络知识应用:保障分布式StructBERT微服务集群通信

计算机网络知识应用&#xff1a;保障分布式StructBERT微服务集群通信 最近在搞一个基于StructBERT模型的智能问答系统&#xff0c;随着用户量上来&#xff0c;单台服务器明显扛不住了&#xff0c;响应慢不说&#xff0c;还动不动就挂掉。没办法&#xff0c;只能上微服务集群&a…...

PS软件插件开发思维:为视频编辑流程注入AI字幕能力

PS软件插件开发思维&#xff1a;为视频编辑流程注入AI字幕能力 不知道你有没有过这样的经历&#xff1a;辛辛苦苦剪完一个视频&#xff0c;到了加字幕这一步&#xff0c;整个人都蔫了。要么是手动敲字敲到手抽筋&#xff0c;要么是自动生成的字幕时间轴对不上&#xff0c;还得…...