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

前端基础篇-深入了解 Ajax 、Axios

news 2026/4/11 6:30:24

 🔥博客主页： 【小扳_-CSDN博客】
❤感谢大家点赞👍收藏⭐评论✍

文章目录

        1.0 Ajax 概述

        2.0 Axios 概述

        3.0 综合案例

        1.0 Ajax 概述

        通过 Ajax 可以给服务器发送请求，并获取服务器响应的数据。异步交互是指，可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术，如：用户名是否可用的校验等等。

         简单来说，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>
</head>
<body><div id="id1"></div></body>
<script>/* 1.0 创建对象 */var xmlHttpRequest = new XMLHttpRequest();/* 2.0 发送异步请求 */xmlHttpRequest.open("get","http://api.doc.jiyou-tech.com/mock/6391/text");xmlHttpRequest.send();/* 3.0 获取数据 */xmlHttpRequest.onreadystatechange = function(){if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){document.getElementById("id1").innerHTML = xmlHttpRequest.responseText;}}</script>
</html>

运行结果：

      成功获取服务器的响应，xmlHttpRequest.readyState 的值会赋值为 4 ，status 的值为 200 。

手册： AJAX - XMLHttpRequest 对象 (w3school.com.cn)

        2.0 Axios 概述

        Axios 是对原生的 Ajax 进行了封装，简化书写，快速开发。作用同样是给服务器发送请求，并获取服务器响应的数据。

引入 Axios 的 js 文件：

        采取的是 CDN 的方式导入到 HTML 中。

    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

语法结构：

<script>axios({methods:"get",url:"http://api.doc.jiyou-tech.com/mock/6391/text"}).then((result) => {alert(result);})axios({methods:"post",url:"http://api.doc.jiyou-tech.com/mock/6391/text"}).then((result) => {alert(result);})
</script>

         如果在 get 中有参数添加，直接在 url 后面接上 ? 后面加上参数即可；如果在 post 中有参数添加，需要对象 data 中添加参数，如：

    axios({methods:"post",url:"http://api.doc.jiyou-tech.com/mock/6391/text",data:"id=1"}).then((result) => {alert(result);})

还有更加简便的写法：

<script>
axios.get("http://api.doc.jiyou-tech.com/mock/6391/text").then((result)=> { alert(result);})
axios.post("http://api.doc.jiyou-tech.com/mock/6391/text","id=1").then((result)=> { alert(result);})    
</script>

        一般用这种方式比较多。

        使用 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/vue/dist/vue.js"></script><script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body><div id="app"><span >{{emps.name}}</span></div></body>
<script>new Vue({el:"#app",data:{emps:""},mounted() {axios.get("http://api.doc.jiyou-tech.com/mock/6391/text").then((result) => {this.emps = result.data;})}})
</script>
</html>

        利用 Axios 获取数据后，交给 Vue 进行网页的渲染。

        3.0 综合案例

        利用 Axios 向服务器发送请求，并返回服务器响应的结果，再交给 vue 对网页进行渲染。

模拟服务器中的数据：

代码如下：

<!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/dist/vue.min.js"></script><script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body><div id="app"><table border="1px" cellspacing="0px" align="center" width="400px"><tr><th>ID</th><th>姓名</th><th>年龄</th><th>性别</th><th>成绩</th></tr><tr v-for="(emp, index) in emps"><td align="center">{{index+1}}</td><td align="center">{{emp.name}}</td><td align="center">{{emp.age}}</td><td align="center" v-if="emp.gender == 1">男</td><td align="center" v-if="emp.gender == 2">女</td><td align="center">{{emp.score}}</td></tr></table></div>
</body>
<script>new Vue({el:"#app",data:{emps:[]},mounted() {axios.get("http://api.doc.jiyou-tech.com/mock/6407/text").then((result) => {  this.emps = result.data.data})}})
</script>
</html>

        还用到了 vue 生命周期中的 mounted() ，挂载结束后，就会自动调用该函数。this 将获取的 json 赋值给当前对象的 emps 。

运行结果：

相关文章：

前端基础篇-深入了解 Ajax 、Axios

&#x1f525;博客主页&#xff1a; 【小扳_-CSDN博客】 ❤感谢大家点赞&#x1f44d;收藏⭐评论✍ 文章目录 1.0 Ajax 概述 2.0 Axios 概述 3.0 综合案例 1.0 Ajax 概述 通过 Ajax 可以给服务器发送请求&#xff0c;并获取服务器响应的数据。异步交互是指&#xff0c;可以在不…...

编程日记 2024/3/23 5:31:24

是德科技keysight N1912A双通道功率计

181/2461/8938产品概述&#xff1a; Keysight(原Agilent) N1912A P系列双通道功率计可提供峰值、峰均比、平均功率、上升时间、下降时间、最大功率值、最小功率值以及宽带信号的统计数据。 Keysight(原Agilent) N1912A P系列双通道功率计, 可提供峰值、峰均比、平均功率、上升…...

编程日记 2024/3/23 5:30:22

怿星科技Neptune CHT-S测试系统，让智能座舱测试更加高效便捷

随着汽车“智能化”浪潮的推进&#xff0c;汽车的智能化水平正在持续刷新行业认知。在这股智能化潮流中&#xff0c;智能座舱作为客户体验最为直观的部分&#xff0c;其重要性不言而喻。倘若座舱设备出现死机、黑屏、卡顿等现象&#xff0c;都将对客户的使用体验产生非常大的影…...

编程日记 2024/3/23 5:29:21

Vscode初建Vue时几个需要注意的问题

首先放图 注意点1.打开文件夹时&#xff0c;可以是VUE2 或者其他&#xff0c;但不能是VUE&#xff0c;会报错 注意点2.终端输入命令“npm init -y" npm init -y -y 的含义&#xff1a;yes的意思&#xff0c;在init的时候省去了敲回车的步骤&#xff0c;生成的默认的packag…...

编程日记 2024/3/23 5:28:20

最长不下降子序列

问题描述&#xff1a; 统计一个数组中的最长不下降子序列。 示例&#xff1a; 输入&#xff1a;14 输入&#xff1a;13 7 9 16 38 24 37 18 44 19 21 22 63 15 输出&#xff1a;8&#xff08;其中是7 9 16 18 19 21 22 63&#xff09; 方法&#xff1a;借鉴B站UP主T_zhao…...

编程日记 2024/3/23 5:27:19

QT gridlayout 循环设置组件，表格也通用 已解决

在需求中。经常遇到&#xff0c;表格 展示需求。 几乎都是json格式的。 // 列表配置文件QJsonArray listJsonArray getCfgJsonData("details_tab_table_config.json");if (listJsonArray.isEmpty()){return;}ui->gridWidget->setMaximumSize(QSize(310, 180)…...

编程日记 2024/3/23 5:26:18

后端前行Vue之路(一)：初识Vue

1.Vue是什么 Vue (读音 /vjuː/&#xff0c;类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是&#xff0c;Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层&#xff0c;不仅易于上手&#xff0c;还便于与第三方库或既有项目整合。另一方…...

编程日记 2024/3/23 5:25:17

C#、.NET版本、Visual Studio版本对应关系及Visual Studio老版本离线包下载地址

0、写这篇文章的目的 由于电脑的环境不同&#xff0c;对于一个老电脑找到一个适配的vscode环境十分不易。总结一下C#、.NET、Visual Studio版本的对应关系&#xff0c;及各个版本Visual Studio的下载地址供大家参考 1、C#、.NET版本、Visual Studio版本对应关系如下 2、Visua…...

编程日记 2024/3/23 5:24:15

yarn安装包时报错error Error: certificate has expired

安装教程&#xff1a; 配置镜像地址&#xff1a; npm config set registry https://registry.npmmirror.com//镜像&#xff1a;https://developer.aliyun.com/mirror/NPM 安装yarn&#xff1a; npm install --global yarn查看版本&#xff1a; yarn --version卸载&#xff…...

编程日记 2024/3/23 5:23:14

手机可以格式化存储卡吗？格式化以后出现什么情况

随着智能手机的普及&#xff0c;存储卡&#xff08;如SD卡、MicroSD卡等&#xff09;已成为手机存储扩展的重要工具。然而&#xff0c;在使用过程中&#xff0c;我们有时可能会遇到需要格式化存储卡的情况。那么&#xff0c;手机能否直接格式化存储卡呢&#xff1f;格式化后存储…...

编程日记 2024/3/23 5:22:13

亚马逊AWS展示高效纠错的全新量子比特！

亚马逊网络服务公司&#xff08;AWS&#xff09;在量子计算的纠错技术领域取得了显著成就&#xff0c;极大地简化了量子系统的复杂性和资源需求。他们的研究人员通过采用“双轨擦除”量子比特&#xff08;dual-rail erasure qubit&#xff09;技术&#xff0c;有效地克服了量子…...

编程日记 2024/3/23 5:19:10

FEX-Emu在Debian/Ubuntu系统使用

FEX-Emu在Debian/Ubuntu系统使用 1. Debootstrap子系统安装&#xff08;可选&#xff09;2. Debian/Ubuntu依赖包安装3. 获取FEX-Emu源码并编译4. 根文件系统RootFS安装5. 基于 FEX-Emu 运行应用 1. Debootstrap子系统安装&#xff08;可选&#xff09; sudo apt-get install …...

编程日记 2024/3/23 5:18:09

docker 不同架构镜像融合问题解决

1、背景 docker 作为目前容器的标准之一&#xff0c;但是对于多种架构的平台的混合编译支撑不是很好。因此衍生了镜像融合&#xff0c;分别将多种不同的架构构建好&#xff0c;然后将镜像进行融合上传。拉取镜像的会根据当前系统的架构拉取不同的镜像&#xff0c;也可以通过 -…...

编程日记 2024/3/23 5:17:08

windows_anaconda 安装pytorch

查看CUDA版本 cmd nvidia-smi # NVIDIA-SMI 546.56 Driver Version: 546.56 CUDA Version: 12.3nvcc --version # nvcc: NVIDIA (R) Cuda compiler driver # Copyright (c) 2005-2023 NVIDIA Corporation # Built on Wed_Nov_22_10:30:42_Pacific_Standard_Time_2023 # C…...

编程日记 2024/3/23 5:16:07

IP SSL证书注册流程

使用IP地址申请SSL证书&#xff0c;需要用公网IP地址申请&#xff0c;申请之前确保直接的IP地址可以开放80或者443端口两者选择1个就好&#xff0c;端口不需要一直开放&#xff0c;只要认证的几分钟内开放就可以了&#xff0c;然后IP地址根目录可以上传txt文件。 IP SSL证书认…...

编程日记 2024/3/23 5:15:05

shentou思路流程

信息收集&#xff1a; 1、获取域名whois信息也就是所谓的资产收集 2、服务器子域名、旁站、c段查询 3、服务器操作系统类型、版本、补丁状况、开放端口&#xff1a;22 ssh 80 web 445 3389.。。 4、web中间件类型、版本、网站目录结构、使用的waf等设备 5、数据库类型、版…...

编程日记 2024/3/23 5:14:05

航空实时监控

1、从Kafka中读取飞机数据&#xff0c;并进行清洗 此步骤在前面的“使用Spark清洗统计业务数据并保存到数据库中”任务阶段应该已经完成。如果没有完成&#xff0c;请参考源代码自行完成。核心类主要有三个&#xff1a;SparkStreamingApplication类、SparkUtil类和MapManager类…...

编程日记 2024/3/23 5:13:04

第十四届蓝桥杯JavaB组省赛真题 - 幸运数字

进制转换可以参考如下的十进制&#xff0c;基本一样的&#xff0c;只是把10变成了其他数字&#xff0c; sum就是各个数位之和 public static int myUtil(int n) {int sum 0;while(n > 0) {sum n % 10;n / 10;}return sum;} 注意&#xff1a; 如果写在同一个类里面&…...

编程日记 2024/3/23 5:12:03

【练习】双指针算法思想

&#x1f3a5; 个人主页&#xff1a;Dikz12&#x1f525;个人专栏&#xff1a;Java算法&#x1f4d5;格言&#xff1a;那些在暗处执拗生长的花&#xff0c;终有一日会馥郁传香欢迎大家&#x1f44d;点赞✍评论⭐收藏 目录 1. 移动零 1.1 题目描述 1.2 讲解算法原理 1.3 编…...

编程日记 2024/3/23 5:11:02

Leetcode 20. 有效的括号

心路历程&#xff1a; 看到括号问题直接想到栈&#xff0c;但是纠结了一下题目中给出的 ‘2. 左括号必须以正确的顺序闭合’ 这一约束&#xff0c;其实这句话的意思简化了题目要求&#xff0c;[(])这样的字符串就不满足要求了。 注意的点&#xff1a; 1、注意最后需要栈为空…...

编程日记 2024/3/23 5:10:01

BMD58T280 TFT-LCD驱动库技术解析与嵌入式显示优化

1. BMD58T280 TFT-LCD显示库深度技术解析BMD58T280是Best Modules Corp推出的2.8英寸TFT-LCD显示扩展板专用Arduino驱动库&#xff0c;面向嵌入式开发者提供SPI与EBI双接口支持。该库并非通用型LCD驱动框架&#xff0c;而是针对BMD58T280硬件模块的定制化固件封装&#xff0c;其…...

编程新知 2026/4/11 5:07:39

告别“以刊评文”，中国顶刊《Vita》启航：一份不收费的CNS挑战者正式来了

如果有一天&#xff0c;发论文不用交几万块版面费&#xff0c;评价论文不再看影响因子&#xff1b;你会觉得&#xff0c;这是理想&#xff0c;还是趋势&#xff1f;2026年&#xff0c;这件事&#xff0c;开始变成现实。2026年的春天&#xff0c;中国学术界连续打出两记“重拳”…...

编程新知 2026/4/11 4:46:33

手把手教你复现京东H5st参数生成（附Python代码与调试技巧）

手把手教你复现京东H5st参数生成&#xff08;附Python代码与调试技巧&#xff09; 在电商平台的数据交互中&#xff0c;参数加密是保障安全性的重要环节。H5st作为京东H5页面中的关键加密参数&#xff0c;其生成过程涉及多步字符串处理和加密算法组合。本文将带您从零开始&…...

编程新知 2026/4/11 2:54:04

Sunday算法实战：C++高效内存特征码搜索与通配符优化

1. Sunday算法与内存特征码搜索初探 第一次接触内存特征码搜索时&#xff0c;我完全被那些十六进制数字和问号搞懵了。直到发现Sunday算法这个神器&#xff0c;才真正体会到什么叫"秒搜"的快感。简单来说&#xff0c;Sunday算法就像是个超级眼疾手快的图书管理员&…...

编程新知 2026/4/11 1:52:46

小白程序员也能看懂的大模型内部原理：从加减乘除到Llama 3.1（收藏版）

本文深入浅出地解析了大语言模型&#xff08;LLM&#xff09;的工作原理&#xff0c;从基础的加减乘除运算开始&#xff0c;逐步构建一个生成式AI&#xff0c;并最终理解现代LLM和Transformer架构。文章剥去了机器学习领域的复杂术语&#xff0c;将一切还原为数字&#xff0c;帮…...

编程新知 2026/4/11 1:50:46

用Cisco Packet Tracer模拟企业级网络：从IP规划到邮件服务器部署全流程

企业级网络全栈模拟实战&#xff1a;从拓扑设计到服务联调的Cisco Packet Tracer深度指南 当我们需要在真实环境中部署企业网络时&#xff0c;直接在生产设备上操作往往伴随着高风险。这时&#xff0c;Cisco Packet Tracer作为一款专业的网络模拟工具&#xff0c;能够为我们提供…...

编程新知 2026/4/11 1:42:28

在超大数据集下 DuckDB 与 MySQL 查询速度对比吨

一、什么是urllib3&#xff1f; urllib3 是一个用于处理 HTTP 请求和连接池的强大、用户友好的 Python 库。 它可以帮助你&#xff1a; 发送各种 HTTP 请求&#xff08;GET, POST, PUT, DELETE等&#xff09;。 管理连接池&#xff0c;提高网络请求效率。 处理重试和重定向。 支…...

编程新知 2026/4/11 1:09:55

ArduLog：ESP32/ESP8266轻量级嵌入式日志库

1. ArduLog&#xff1a;面向ESP8266/ESP32的轻量级嵌入式日志库深度解析1.1 设计定位与工程价值ArduLog并非通用日志框架&#xff0c;而是专为资源受限型Wi-Fi SoC&#xff08;ESP8266/ESP32&#xff09;定制的裸机友好型调试日志工具。其核心设计哲学可概括为三点&#xff1a;…...

编程新知 2026/4/11 0:24:48

LabVIEW开发的TestStand多工位并行测试框架：支持独立测试、序列编辑与参数编辑功能...

labview 编写的类teststand多工位并行测试框架&#xff0c;带单独的测试和序列编辑&#xff0c;参数编辑功能&#xff0c;具体的见图片&#xff0c;功能正常&#xff0c;多工位测试&#xff0c;带源码最近在捣鼓一个用LabVIEW编写的类TestStand多工位并行测试框架&#xff0c;感…...

编程新知 2026/4/11 0:10:43

Argo Events 高级过滤技巧：数据过滤、上下文过滤和时间过滤的完整指南

Argo Events 高级过滤技巧&#xff1a;数据过滤、上下文过滤和时间过滤的完整指南 【免费下载链接】argo-events Event-driven Automation Framework for Kubernetes 项目地址: https://gitcode.com/gh_mirrors/ar/argo-events Argo Events 是 Kubernetes 生态系统中强大…...

编程新知 2026/4/10 23:07:47